Forum Discussion

chicks's avatar
chicks
Regular Contributor
13 years ago

link hidden by CSS value - accessing CSS values



I'm trying to verify that a link is either present or not on my webpage.   The developer has used a CSS attribute to hide or display the link.

Here's the webpage code.



        if (item.url1 == undefined || item.url1 == null) {

            $('#carPopup_li1').css("display","none");

        } else {

            $('#carPopup_li1').css("display","block");

            html = '<a class="link_cta" href="' + item.url1 + '">Register a card</a>';

            $('#carPopup_li1').html(html);

        }



In either case, the link object exists, and in either case the link object is Visible.  I see no changes in the object spy attributes for when the link is displayed or not.  The developer suggests that I check the css display attribute, for either "none" or "block".



How do I  access this?   I tried getAttribute("display") but got a null value.



Thanks,  Curt Hicks




2 Replies

Sort By
  • ArtemS's avatar
    ArtemS
    SmartBear Alumni (Retired)
    13 years ago
    Hello,

    The way to retrieve CSS attributes of a web element depends on the following two factors:

     a) whether the page is displayed in Microsoft Internet Explorer or in Mozilla Firefox;

     b) whether the attributes are applied directly to the element or inherited from the element's parents.




    • For the Microsoft engine:  


      To access the set of an element's immediate CSS attributes, use the element.style property. (E.g. myLink.style.display)

      To get the resulting CSS attributes of the element (taking into account the attributes applied to parent elements), use the element.currentStyle property. (E.g. myLink.currentStyle.display). Both properties return the IHTMLStyle objects.




    • For the Mozilla engine:  


      To obtain the set of an element's immediate CSS attributes, use the element.style property. It returns the CSSStyleDeclaration object. Despite that the returned objects are different, the script syntax will be the same as for IE: myLink.style.display.

     The technique of getting the resulting CSS attributes in Mozilla browsers is a little bit more complicated. The resulting style is returned by the window.getComputedStyle method which accepts the needed element as a parameter.





    ...  

    var element, ComputedStyle;

        if (Options.Web.TreeModel == "DOM")

          {

          //Obtain the element in the DOM model

          element = page.document.getElementById(elementID);

          }

          else 

          {

          //Obtain the element in the Tag, Tree and Hybrid models

          element = page.contentDocument.getElementById(elementID);

          }

      

         ComputedStyle = page.content.getComputedStyle(element, "");

         Log.Message("The value of the display attribute is: "+ComputedStyle.display);

    }





    Best regards, Artem.
  • chicks's avatar
    chicks
    Regular Contributor
    13 years ago


    Haven't been able to check the CSS value, but I discovered that the Object.Width = 0 when the value is hidden, so I'm currently using that.