使用Javascript更改CSS值

使用javascript設置內聯CSS值很容易。如果我想改變寬度和我有HTML這樣的：使用Javascript更改CSS值

<div style="width: 10px"></div>

所有我需要做的是：

document.getElementById('id').style.width = value;

它將改變內嵌樣式表值。通常這不是問題，因爲內聯樣式會覆蓋樣式表。例如：

<style> 
    #tId { 
     width: 50%; 
    } 
</style> 

<div id="tId"></div>

使用此Javascript：

document.getElementById('tId').style.width = "30%";

我得到如下：

<style> 
    #tId { 
     width: 50%; 
    } 
</style> 

<div id="tId" style="width: 30%";></div>

這是一個問題，因爲不僅我不想改變內聯值，如果我在設置之前查看寬度，當我有：

<div id="tId"></div>

返回的值是Null，所以如果我有需要知道某些邏輯的東西的寬度的Javascript（我將寬度增加1％，而不是特定的值），那麼當我期望字符串「 50％「實際上並不奏效。

所以我的問題：我有CSS樣式的值不在內聯，我怎麼能得到這些值？如何修改樣式而不是內聯值，給定一個ID？

來源

2009-02-19 Coltin

你可以編輯自己的帖子？在開始時有一些不完整的句子，不知道你在找什麼...... – 2009-02-19 17:01:16

對於你的問題，我仍然有些困惑。你問1）改變CSS本身，它會一次改變所有的元素？或2）一次更改單個項目的CSS？ – Mike 2009-02-19 17:02:28

我也很困惑，至於實際的問題。對象的當前樣式不一定與標籤的'樣式'屬性相同。 – MattJ 2009-02-19 17:03:39

好吧，這聽起來像你想改變全球CSS，這樣可以一次有效地改變一個特定風格的所有元素。我最近學會了如何從Shawn Olson tutorial自己做到這一點。您可以直接參考他的代碼here。

以下是摘要：

您可以通過stylesheets的document.styleSheets檢索。這實際上會返回頁面中所有樣式表的數組，但您可以通過document.styleSheets[styleIndex].href屬性確定您正在使用哪個樣式表。一旦找到想要編輯的樣式表，您需要獲取規則數組。這在IE中稱爲「規則」，在大多數其他瀏覽器中稱爲「cssRules」。告訴你CSSRule你在的方式是selectorText屬性。工作代碼看起來像這樣：

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF 
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex]; 
var selector = rule.selectorText; //maybe '#tId' 
var value = rule.value;   //both selectorText and value are settable.

讓我知道這是如何工作的亞，請評論，如果你看到任何錯誤。

來源

2009-02-19 18:00:33 Mike

如果你有100s +元素，以這種方式更改CSS會*更快*。舉例來說，一次更改表格某個部分的所有單元格。 – EdH 2013-02-11 20:42:42

我從來沒有見過這樣的實際使用，但你應該考慮DOM stylesheets。不過，我真的認爲這太過分了。

如果您只想獲取元素的寬度和高度，而不考慮要應用的維度的位置，只需使用element.offsetWidth和element.offsetHeight即可。

來源

2009-02-19 17:10:59

我的用途：

增加將檢查寬度是否小於100％，如果是則增加1％。 document.getElementById.style.width返回null，因爲沒有內聯值。有沒有比DOM Stylesheets更簡單的方法？ – Coltin 2009-02-19 17:18:58

您可以獲取任何元素的「計算」風格。 IE瀏覽器使用一種叫做「currentStyle」的東西，Firefox（我假設其他「標準兼容」瀏覽器）使用「defaultView.getComputedStyle」。

你需要編寫一個跨瀏覽器的功能來做到這一點，或者使用一個好的Javascript框架，如原型或jQuery（在原型javascript文件中搜索「getStyle」，在jquery javascript文件中搜索「curCss」。

這就是說，如果你需要高度或寬度，你應該使用element.offsetHeight和element.offsetWidth。

返回的值是空的，所以如果我的Javascript是需要知道的事情做一些邏輯寬度（我增加1％的寬度，而不是一個特定的值）

記住，如果你添加爲內嵌樣式有問題的元素，它可以作爲「默認」值，並會在頁面加載是可讀的JavaScript，因爲它是元素的內聯樣式屬性：

<div style="width:50%">....</div>

來源

2009-02-19 22:18:03

我沒有足夠的評論，所以我會格式化一個答案，但它是隻是有關問題的示範。

看來，當元素的樣式在樣式表中定義它們不是的getElementById（「someElement」）。風格

此代碼說明了問題... Code from below on jsFiddle可見。

在測試2中，在第一次調用時，項左值是未定義的，所以應該是一個簡單的切換。對於我的使用，我將定義我的重要樣式值inline，但它似乎部分地打敗了樣式表的目的。

這裏的頁面代碼...

<html> 
    <head> 
    <style type="text/css"> 
     #test2a{ 
     position: absolute; 
     left: 0px; 
     width: 50px; 
     height: 50px; 
     background-color: green; 
     border: 4px solid black; 
     } 
     #test2b{ 
     position: absolute; 
     left: 55px; 
     width: 50px; 
     height: 50px; 
     background-color: yellow; 
     margin: 4px; 
     } 
    </style> 
    </head> 
    <body> 

    <!-- test1 --> 
    Swap left positions function with styles defined inline. 
    <a href="javascript:test1();">Test 1</a><br> 
    <div class="container"> 
     <div id="test1a" style="position: absolute;left: 0px;width: 50px; height: 50px;background-color: green;border: 4px solid black;"></div> 
     <div id="test1b" style="position: absolute;left: 55px;width: 50px; height: 50px;background-color: yellow;margin: 4px;"></div> 
    </div> 
    <script type="text/javascript"> 
    function test1(){ 
     var a = document.getElementById("test1a"); 
     var b = document.getElementById("test1b"); 
     alert(a.style.left + " - " + b.style.left); 
     a.style.left = (a.style.left == "0px")? "55px" : "0px"; 
     b.style.left = (b.style.left == "0px")? "55px" : "0px"; 
    } 
    </script> 
    <!-- end test 1 --> 

    <!-- test2 --> 
    <div id="moveDownThePage" style="position: relative;top: 70px;"> 
    Identical function with styles defined in stylesheet. 
    <a href="javascript:test2();">Test 2</a><br> 
    <div class="container"> 
     <div id="test2a"></div> 
     <div id="test2b"></div> 
    </div> 
    </div> 
    <script type="text/javascript"> 
    function test2(){ 
     var a = document.getElementById("test2a"); 
     var b = document.getElementById("test2b"); 
     alert(a.style.left + " - " + b.style.left); 
     a.style.left = (a.style.left == "0px")? "55px" : "0px"; 
     b.style.left = (b.style.left == "0px")? "55px" : "0px"; 
    } 
    </script> 
    <!-- end test 2 --> 

    </body> 
</html>

我希望這有助於照亮的問題。

跳過

來源

2011-05-05 05:56:44 BentFX

請！只需問w3（http://www.quirksmode.org/dom/w3c_css.html）！或實際上，它花了我五個小時......但在這裏！

function css(selector, property, value) { 
    for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles 
     //Try add rule 
     try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length); 
     } catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE 
    } 
}

功能是很容易使用..例如：

<div id="box" class="boxes" onclick="css('#box', 'color', 'red')">Click Me!</div> 
Or: 
<div class="boxes" onmouseover="css('.boxes', 'color', 'green')">Mouseover Me!</div> 
Or: 
<div class="boxes" onclick="css('body', 'border', '1px solid #3cc')">Click Me!</div>

哦..

編輯：如@ user21820在其答案所描述的，它可能是一個有點不必要更改頁面上的所有樣式表。以下腳本適用於IE5.5以及最新的Google Chrome瀏覽器，並僅添加上述css（）函數。

(function (scope) { 
    // Create a new stylesheet in the bottom 
    // of <head>, where the css rules will go 
    var style = document.createElement('style'); 
    document.head.appendChild(style); 
    var stylesheet = style.sheet; 
    scope.css = function (selector, property, value) { 
     // Append the rule (Major browsers) 
     try { stylesheet.insertRule(selector+' {'+property+':'+value+'}', stylesheet.cssRules.length); 
     } catch(err) {try { stylesheet.addRule(selector, property+':'+value); // (pre IE9) 
     } catch(err) {console.log("Couldn't add style");}} // (alien browsers) 
    } 
})(window);

來源

2012-06-18 10:36:20

收集代碼的回答後，我寫了這個功能似乎對我的FF 25

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){ 
    /* returns the value of the element style of the rule in the stylesheet 
    * If no value is given, reads the value 
    * If value is given, the value is changed and returned 
    * If '' (empty string) is given, erases the value. 
    * The browser will apply the default one 
    * 
    * string stylesheet: part of the .css name to be recognized, e.g. 'default' 
    * string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td' 
    * string style: camelCase element style, e.g. 'fontSize' 
    * string value optionnal : the new value 
    */ 
    var CCSstyle = undefined, rules; 
    for(var m in document.styleSheets){ 
    if(document.styleSheets[m].href.indexOf(stylesheet) != -1){ 
    rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules']; 
    for(var n in rules){ 
     if(rules[n].selectorText == selectorText){ 
     CCSstyle = rules[n].style; 
     break; 
     } 
    } 
    break; 
    } 
    } 
    if(value == undefined) 
    return CCSstyle[style] 
    else 
    return CCSstyle[style] = value 
}

這是把值將在JS使用的CSS的方式運行良好即使瀏覽器不能理解。例如滾動表中的tbody的maxHeight。

電話：

CCSStylesheetRuleStyle('default', "#mydiv", "height");

CCSStylesheetRuleStyle('default', "#mydiv", "color", "#EEE");

來源

2013-11-12 23:11:45 FrViPofm

我不知道爲什麼其他的解決方案都要經過樣式表的文件的整個列表。這樣做會在每個樣式表中創建一個新條目，效率不高。相反，我們可以簡單地附加一個新的樣式表，並在那裏簡單地添加我們想要的CSS規則。

style=document.createElement('style'); 
document.head.appendChild(style); 
stylesheet=style.sheet; 
function css(selector,property,value) 
{ 
    try{ stylesheet.insertRule(selector+' {'+property+':'+value+'}',stylesheet.cssRules.length); } 
    catch(err){} 
}

需要注意的是，我們可以通過添加覆蓋甚至內嵌樣式上直接設置元素「！重要」的財產的價值，除非有已經存在更具體的「！重要」的樣式聲明該屬性。

來源

2015-12-05 04:59:39 user21820

This simple 32 lines gist讓你找出給定的樣式表，並很容易改變它的風格：

var styleSheet = StyleChanger("my_custom_identifier"); 
styleSheet.change("darkolivegreen", "blue");

來源

2016-09-09 15:09:49 solendil

使用Javascript更改CSS值

回答

相關問題