我可以在后面的代码中读取css类运行时的内容吗？

Question

i have a page with a .css file linked to it. Let's say there is this content in it:

.wrapper {
 color:red;
}

is there a way to read the value of the .wrapper element runtime in the code behind?

the problem is that runtime a different stylesheet is linked so the .wrapper is always available, but the content is always different.

what i want to accomplish is to get the value (in this case: color:red;) from the currently attached stylesheet.

Is that possible?

EDIT: is it possible client side, then i can put it in a hidden field somehow

Answer 1

I'm assuming that you will have the path (physical or virtual) to the CSS file you are linking to.

If it is a file on the webserver, you can load this into a text file, or if it is on a remote server you can use an XMLHTTPRequest to go and get it.

Once you have the body of the file loaded, the following reg-ex will parse the file, detect the wrapper class and pluck out the value of the color key into the first group of the match.

\.wrapper[\s|\S]*color\s*:\s*([^;]*);

Some sample code

    var inputfileReader = new StreamReader("path to my css file");
    string inputLine = inputfileReader.ReadToEnd() ;
    inputfileReader.Close();

    Regex cssParser = new Regex(@"\.wrapper[\s|\S]*color\s*:\s*([^;]*);");

    string myCssClass = string.Empty; ;
    if (cssParser.Match(inputLine).Groups[1] != null)
        myCssClass = cssParser.Match(inputLine).Groups[1].Value;

Answer 2

<script type="text/javascript">
     window.getComputedStyle = window.getComputedStyle || function (element) { return element.currentStyle; };

     window.onload = function () {
          var dummy = document.createElement("span");
          dummy.className = "wrapper";
          document.getElementsByTagName("body")[0].appendChild(dummy);
          document.getElementById("<%= WrapperColorHiddenField.ClientID %>").value = getComputedStyle(dummy).color;
          document.getElementsByTagName("body")[0].removeChild(dummy);
     }
</script>

The drawback of that solution is that you need to parse returned value: in IE red value returned whereas in Chrome returned rgb(255,0,0)

Answer 3

This is tricky

At client side its possible,
Add a hidden element to page & assign the class and then you can easily get css properties of the DOM element using jquery.

var testElement = $("<div></div>");
testElement.addClass("wrapper");
testElement.css("display", "none");
$("body").append(testElement);
alert(testElement.css('color'));

At server side if you want to get the values from css file,
check this http://www.codeproject.com/KB/recipes/CSSParser.aspx

Regards, NJ

Answer 4

you can look at these links

http://blog.dynamicprogrammer.com/2008/01/20/CSSParserClassInNET.aspx

http://www.codeproject.com/KB/recipes/CSSParser.aspx

Answer 5

At client side playing with CSS classes is always possible. You can accesss any class on the client side. Also you can add a hidden field or access it. Use jquery:

$("#<%=ServerSideId.ClientID%>").addClass( className );

If you can be more clearer with the requirements i can provide a solution.