如何使用javascript在CSS中定位元素

HTML元素的位置由鏈接的CSS確定。如何使用javascript在CSS中定位元素

div.title 
{ 
position:absolute; 
top:12px; 
}

我只能用document.styleSheets[0].cssRules[0].position找到標題的位置的價值，但我怎麼能知道這個位置是屬於冠軍？
換句話說，js代碼如何知道document.styleSheets[0].cssRules[0]是用於標題？

來源

2011-08-05 Fan Wu

你真的在找什麼樣式表嗎？或者你想要div的實際位置值？ –

我只想得到字符串「div.title」 –

獲取樣式時有幾個瀏覽器差異。要獲得一般樣式規則：

function getStyleRule(s) { 
    var sheet, sheets = document.styleSheets; 
    var ruleProp, rule, rules; 

    for (var i=0, iLen=sheets.length; i<iLen; i++) { 
    ruleProp = ruleProp || (sheets[i].cssRules? 'cssRules' : 'rules'); 
    rules = sheets[i][ruleProp]; 

    for (var j=0, jLen=rules.length; j<jLen; j++) { 
     rule = rules[j]; 
     if (s == rule.selectorText) { 
     return rule; 
     } 
    } 
    } 
}

如果你只是想匹配的第一板的第一條規則，則：

var sheet = document.styleSheets[0]; 
var rules = sheet.cssRules || sheet.rules; 
alert(rules[0]);

，看看選擇：

並看到已設定的樣式：

alert(rules[0].cssText || rules[0].style.cssText);

注意到某些瀏覽器將返回完全寫在樣式表中的內容，而其他瀏覽器將返回對它們的解釋（即，它依賴於實現並且不能跨瀏覽器直接比較）。

來源

2011-08-05 06:14:54 RobG

我覺得這回答了你的問題：

您可以使用document.styleSheets[0].cssRules[0].selectorText，這將給你「div.title」

來源

2011-08-05 05:26:33 Paulpro

我試過你的解決方案，但是我得到了一個「undefined」，這個方法有一些兼容性問題，用不同的瀏覽器 –

是selectorTect一個錯字？ – alnorth29

您錯誤地將「selectorTect」替換爲「selectorText」謝謝大家。 –

你可以檢查風格是你要通過遍歷樣式表，則規則的一個（兩個迴路）

肯定不會非常有效相比，越來越計算樣式代替，但這裏內有一個例子

// iterate stylesheets 
var css = document.styleSheets; 
for (var i in css) { 
    if (!isNaN(i)) { 
     // iterate rules in the stylesheets 
     for (var j in css[i].cssRules) { 
      if (!isNaN(j)) { 
       var rule = css[i].cssRules[j]; 
       if (rule.selectorText.indexOf('div.title') > -1) { 
        // do something with position value 
        alert(css[i].cssRules[j].style.position); 
       } 
      } 
     } 
    } 
}

jsfiddle

來源

2011-08-05 06:04:31 MikeM

謝謝你的幫助。 –

如何使用javascript在CSS中定位元素

回答

相關問題