的語法是否正確包括在JS

CSS多屬性我有這樣的：的語法是否正確包括在JS

的document.getElementById（ 'returning_user_search_box'）style.backgroundColor = '黃色';

，現在我需要添加更多的風格這樣的：

保證金左：-280px;邊距：-280px; min-width：550px;

我嘗試了一些組合，例如這一個，但沒有成功：

的document.getElementById（ 'returning_user_search_box'）style.innerHTML ='{保證金左：-280px;邊距：-280px; min-width：550px;}';

任何線索？

來源

2013-08-22 dotcom22

一般的經驗法則是_CSS_屬性'foo-bar'變成_JavaScript_屬性'fooBar'，並且前面的連字符被刪除（例如，對於'-webkit- *'）。 –

你必須單獨設置他們都：

var style = document.getElementById('returning_user_search_box').style; 

style.backgroundColor = 'yellow'; 
style.marginLeft  = '-280px'; 
style.marginTop  = '-280px'; 
style.minWidth  = '550px';

來源

2013-08-22 20:44:27

您必須分別設定他們。你可以創建CSS類，只需在javascript中綁定類。另一種選擇是使用支持多屬性CSS樣式的jQuery。

來源

2013-08-22 20:46:20

您可以使用元素的style對象的cssText屬性在元素上設置多個樣式。您也可以附加到現有的樣式。

var style = document.getElementById('returning_user_search_box').style; 

style.cssText += "margin-left: -280px; min-width: 550px;";

http://jsfiddle.net/hQnTX/1/

你也環比你（這在語法上是不正確的方式）的對象，並單獨分配屬性：

var properties = {"margin-left":"-280px", "margin-top":"-280px", "min-width": "550px"}, 
for (prop in properties) { 
    if (properties.hasOwnProperty(prop)) { 
     style[prop] = properties[prop]; 
    } 
}

http://jsfiddle.net/hQnTX/

來源

2013-08-22 20:53:52

通則拇指是CSS屬性foo-bar變成JavaScript property fooBar，並且前面的連字符被丟棄（例如，對於-webkit-*）。

這意味着，你可以做一個簡單的轉換功能，它

function toJSProp(cssAttrib) { 
    return (
     cssAttrib 
      .replace(/^-+/, '') 
      .replace(/-([a-z])/g, function ($0, $1) { 
       return $1.toUpperCase(); 
      }) 
    ); 
}

接下來，使循環功能通過一個對象並設置給定元素的風格到它的屬性

function style(element, cssObject) { 
    var i; 
    for (i in cssObject) element.style[toJSProp(i)] = cssObject[i]; 
}

現在你可以通過傳遞一個對象很容易

style(document.body, { 
    'color': 'red', 
    'background-color': 'black' 
});

來源

2013-08-22 20:55:40

的語法是否正確包括在JS

回答

相關問題