1

Is there any javascript function that would allow me to display a css class?

Say for example I have the class:

.formInput{
   width:100px;
   height:20px;
   border:1px solid #000;
}

And I literally wanted to display that class in a textarea... is this possible? And if not, is there a way of displaying all of the set css properties of an element?

Howard Zoopaloopa
  • 3,798
  • 14
  • 48
  • 87
  • i overlooked that you are not using jquery , are you using jquery , otherwise also we can get property's in javascript also – kobe Dec 10 '10 at 06:48
  • http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element – Jeaf Gilbert Dec 10 '10 at 07:03
  • Do you mean "How can I parse my document's stylesheet, find a CSS rule-set with a particular class selector, then get that rule-set as a string which I can place in a textarea?"? – Quentin Dec 10 '10 at 07:18
  • @david that's exactly what I mean. – Howard Zoopaloopa Dec 10 '10 at 17:30

3 Answers3

1

This works in Firefox, and kinda works in Chrome:

function getCss(className) {
    for (var i = 0; i < document.styleSheets.length; i++) {
        for (var j = 0; j < document.styleSheets[i].cssRules.length; j++) {
            if (document.styleSheets[i].cssRules[j].selectorText == "." + className) {
                return document.styleSheets[i].cssRules[j].cssText;
            }
        }
    }
    return "";
}

For IE, something along these lines might get you on the right track... 

var elem = document.getElementById('foo');
var styleInfo = '';
for (var style in elem.currentStyle) {
    styleInfo += style + ": " + elem.currentStyle[style] + "\n";
}

Depending on the exact problem you're trying to solve, another possible (hacky) approach is to get the style elements (document.getElementsByTagName("style")), and then use a regular expression to search their innerHTML for the text you want

Emmett
  • 14,035
  • 12
  • 56
  • 81
0

you can use jquery' attr to get all the propertyz'

http://api.jquery.com/attr/

you can use .css also to get remaining ones

http://api.jquery.com/css/

then use jquerys .text or .val to set it to html

http://api.jquery.com/val/
kobe
  • 15,671
  • 15
  • 64
  • 91
  • your answer a) uses jquery and b) doesn't come close to answering the question – Emmett Dec 10 '10 at 07:19
  • @Emment , i completly agree with jquery , but second point i don't agree, by using jquerys' attr and css we can get all the property's of html element like what he asked for sure – kobe Dec 10 '10 at 07:21
  • but that would require knowing the names of all the attributes and styles in advance – Emmett Dec 10 '10 at 07:40
  • @Emment his question is not clear , don't know whether he wants to scan the complete page and get all the classes// – kobe Dec 10 '10 at 07:45
-1

you try this you make the effect on textarea with class the style.

<style type="text/css">
<!--
.theStyle {

    width: 150px;
    height: 150px;
    background-color:#CCCCCC;
}
-->
</style>

<script language="JavaScript">
    function makeVis(divID) {
        document.getElementById(divID).style.visibility = "visible";
    }
</script>

<textarea name="id" class="theStyle"  id="in" rows="5" cols="5"></textarea>

<a href="javascript:makeVis('in');">Make One Visible</a>
kobe
  • 15,671
  • 15
  • 64
  • 91
pooja
  • 2,334
  • 3
  • 16
  • 16