faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

6 of 8 people (75%) answered Yes
Recently 6 of 8 people (75%) answered Yes


How can I get height from a CSS style and then set another CSS style height to that one?

Apr 8th, 2008 19:08
ha mo, Dave Clark, Justin anderson,

     The answer seems simple, so there must be more to your question 
than what is obvious on the surface of things.  The following is the 
straightforward answer:
    = document.getElementById("id1").style.height;
     Hmmm...  I was about to submit this answer when a thought 
occurred to me.  Perhaps you're referring to modifying a CSS Rule 
rather than an HTML Element.  However, it seems you may also be asking 
about copying a height value from one CSS Rule to another CSS Rule.  
This begs the question, then...  How did the first CSS Rule get 
changed such that the second CSS Rule couldn't be changed in the same 
manner and at the same time?  ::confused::
     But, to answer this new aspect of the question...  The following 
function will find a particular CSS Rule for you:
function findCssRule(selectorText)
{ // returns array of sheet object, rule object, and rule index
  var rules, sheets = document.styleSheets;
  var r, rlen, s, slen = sheets.length;
  for(s=0; s<slen; ++s) {
    rules = (sheets[s].rules) ? sheets[s].rules : sheets[s].cssRules;
    rlen = rules.length;
    for(r=0; r<rlen; ++r) {
      if(rules[r].selectorText == selectorText) {
        return [sheets[s], rules[r], r];
  return null;
     Thus, you could find one rule:
var r1 = findCSSRule(".myclass1");
     Then, find the other rule:
var r2 = findCSSRule(".myclass2");
     And, finally, copy one height value to the other:
r2[1].style.height = r1[1].style.height;
Take care,
Dave Clark