使用JavaScript枚舉CSS樣式元素

首先，JavaScript絕對不是我的母語。不過，我的任務是創建一個網頁，用戶可以使用顏色選擇器來更改CSS元素。然後這些需要被髮送回服務器以存儲在數據庫中。除了最後一部分，這一切都工作得很好，因爲我被困在閱讀所需的元素。使用JavaScript枚舉CSS樣式元素

使用下面的代碼對於任何單個單詞元素（如color）都可以正常工作，但對於任何帶連字符的單詞元素（例如background-color）都會失敗，這會返回undefined。爲了保持一致性，我已經對其他許多元素進行了測試。

任何想法爲什麼這會失敗，最好有修復它的建議？或者，您是否有一個可以用於此目的的代碼片段？的CSS樣式表的

function Save(form) { 
var cssRules; 
var Q = ""; 

for (var S = 0; S < document.styleSheets.length; S++){ 
    if (document.styleSheets[S]['rules']) { 
     cssRules = 'rules'; 
    } else if (document.styleSheets[S]['cssRules']) { 
     cssRules = 'cssRules'; 
    } 

    for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) { 
     if (document.styleSheets[S][cssRules][R].selectorText == '.event') { 
      Q += "+bc=" + document.styleSheets[S][cssRules][R].style['color'] + "+bb=" + document.styleSheets[S][cssRules][R].style['background-color']; 
     } 
     // Similar code for other elements goes here 
    } 
} 

form.css.value = Q; 
form.submit(); 
}

實施例部分：

.event { 
    text-align: center; 
    font-size: 10px; 
    font-weight: bold; 
    text-decoration: line-through; 
    color: red; 
    background-color: #ffff99; 
    height:20px; 
    width:20px; 
}

這是一種HTML元素的我所需要的樣式表值：

<td class="event">11</td>

來源

2010-07-01 John Gardeniers

這是因爲在Javascript中與其他語言一樣，連字符不是有效的符號字符。當您使用字符串作爲索引，像

style["background-color"]

是一樣的做

style.background-color

這是無效的，訪問您需要刪除連字符和大寫的下一個字符帶有分隔符的CSS屬性，如

style.backgroundColor; // or style["backgroundColor"];

來源

2010-07-01 03:23:13

雖然這與Jason的回答基本相同，但我會接受你的，因爲有額外的細節，這對我很有幫助。謝謝。 – 2010-07-01 03:29:52

稍有誤導：連字符是**標識符**中的無效字符。它在屬性名稱中不是無效的，正如你可以通過做'var o = {「％1-2 * -3」：「test」};警報（O [ 「％1-2 * -3」]）;'。然而，你可能是正確的，因爲CSS屬性名稱在JavaScript中是不同的，所以它們可以用作標識符，因此點符號可以用來訪問樣式屬性。 – 2010-07-01 08:42:11

啊，Anurag也提出了相同的觀點。 – 2010-07-01 08:43:15

在JavaScript中設置CSS屬性你需要使用camelCase來獲取hyphened屬性。例如：

/* CSS */ 
background-color: red; 

/* JS */ 
element.style.backgroundColor = 'red';

來源

2010-07-01 03:13:59

要添加到@ Francisco的答案，在JavaScript中的對象屬性可以包含任何字符串。但是，如果它包含變量命名非法的字符，則不能使用.運算符訪問它，並且必須使用[]訪問它。使用這樣的角色將是一個極端的example：

var o = { "◀▶": "hello!" }; 
o["◀▶"]; // hello!

但是，我們不能寫o.◀▶，因爲這將提高一個SyntaxError因爲這些 Unicode字符不是有效的標識符的名稱。但是請注意，unicode字符可用於標識符名稱，並且按照ECMAScript第5版的規定是有效的。但僅限於某些類別的Unicode類別。所以，一個人能write：對於第3版的文檔中

var o = {}; 
o.Π = "hello world"; 
o.Π; // "hello world"

見部分7.6 Identifier Names and Identifiers。或第五版。有關有效標識符名稱的更多信息。

DOM元素的style屬性是CSSStyleDeclaration的對象，可以通過幾種方式進行操作。作爲宿主對象，一些瀏覽器可以提供比其他更多的功能。在Webkit瀏覽器（Chrome和Safari）上，您可以使用[]表示法使用CSS2名稱設置樣式屬性。

document.body.style['background-color'] = "#CCC";

爲CSSStyleDeclaration接口包含一個setProperty方法也可用於設置這些屬性：

interface CSSStyleDeclaration { 
    ... 
    void setProperty(in DOMString propertyName, 
        in DOMString value, 
        in DOMString priority) 
      raises(DOMException); 
    ... 
}

使用setProperty，我們可以這樣寫：

document.body.style.setProperty("background-color", "orange", null);

我們可以使用getPropertyValue使用它的CSS2名稱獲取當前值：

document.body.style.getPropertyValue("background-color");

最後，正如其他答案所述，您始終可以使用CSS2Properties界面來方便地訪問樣式對象的CSS屬性。它們相當於在具有相應屬性名稱的樣式對象上調用setProperty和getPropertyValue。從spec（包含姓名爲應該由該接口被暴露的所有屬性）：

的CSS2Properties接口表示用於檢索和的CSSStyleDeclaration內定型特性的便利機制。該接口的屬性對應於CSS2中指定的所有屬性。獲取此接口的屬性等效於調用CSSStyleDeclaration接口的getPropertyValue方法。設置此接口的屬性等同於調用CSSStyleDeclaration接口的setProperty方法。

在支持此接口（它不是必需的），我們可以查詢/更新的樣式對象，如任何瀏覽器：

document.body.style.backgroundColor = "black";

或

document.body.style["backgroundColor"] = "black";

所有的見examples以上。

來源

2010-07-01 05:02:02 Anurag

感謝您的出色信息。 – 2010-07-01 06:11:37

確實，謝謝你的回答。也許我應該堅持C和Perl。至少那些對我有意義。 :) – 2010-07-02 12:49:43

@Francisco - 不客氣，我在標識符名稱中發現了自己的unicode字符，所以這是一個很好的學習體驗:) @John - 謝天謝地，這些語言不會受到1級的影響。每隔一週：） – Anurag 2010-07-02 18:23:10

使用JavaScript枚舉CSS樣式元素

回答

相關問題