"使用 JavaScript 動態更改元素樣式屬性"

Question

我有一個特定的 div 樣式表。 現在我想用js動態修改div的一個屬性。

我該怎么做？

document.getElementById("xyz").style.padding-top = "10px";

Answer 1

除了其他答案，如果您想對樣式屬性使用破折號概念，您還可以使用：

document.getElementById("xyz").style["padding-top"] = "10px";

Answer 2

這幾乎是正確的。

由於-是一個 javascript 運算符，因此您不能在屬性名稱中真正使用它。 如果您正在設置、 border或類似的單字，您的代碼就可以正常工作。

但是，對於padding-top和任何帶連字符的屬性名稱，您需要記住的是，在 javascript 中，您刪除連字符，並將下一個字母設為大寫，因此在您的情況下，這將是paddingTop 。

還有一些其他的例外。 JavaScript 有一些保留字，例如，您不能像這樣設置float 。 相反，在某些瀏覽器中您需要使用cssFloat ，而在其他瀏覽器中則需要使用styleFloat 。 正是因為這樣的差異，建議您使用諸如 jQuery 之類的框架來為您處理瀏覽器不兼容問題...

Answer 3

還有style.setProperty<\/code>函數：<\/strong>
https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CSSStyleDeclaration\/setProperty<\/a>

document.getElementById("xyz").style.setProperty('padding-top', '10px');

// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');

Answer 4

我解決了類似的問題：

document.getElementById("xyz").style.padding = "10px 0 0 0";

Answer 5

假設你有這樣的 HTML：

<div id='thediv'></div>

Answer 6

document.getElementById("xyz").style.padding-top = '10px';

Answer 7

我建議使用一個函數來處理這個問題，它接受元素 id 和一個包含 CSS 屬性的對象。 這樣，您可以一次編寫多個樣式並使用標准 CSS 屬性語法。

//function to handle multiple styles
function setStyle(elId, propertyObject) {
    var el = document.getElementById(elId);
    for (var property in propertyObject) {
        el.style[property] = propertyObject[property];
    }
}

setStyle('xyz', {'padding-top': '10px'});

Answer 8

很驚訝<\/strong>我沒有看到下面的查詢選擇器<\/em>方式解決方案，

document.querySelector('#xyz').style.paddingTop = "10px"

Answer 9

document.getElementById("xyz").setAttribute('style','padding-top:10px');

Answer 10

document.getElementById('id').style = 'left: 55%; z-index: 999; overflow: hidden; width: 0px; height: 0px; opacity: 0; display: none;';

Answer 11

我在 Javascript 函數中更改 css 樣式。

但是 Uncaught TypeError: bild is null 。

如果我在普通的 html 文件中運行它，它就可以工作。

CODE:

  var text = document.getElementById("text");
var bild = document.getElementById("bild");
var container = document.getElementById("container");

bild.style["background-image"] = "url('stock-bild-portrait-of-confident-senior-business-woman-standing-in-office-with-her-arms-crossed-mature-female-1156978234.jpg')";
//bild.style.background-image = "url('stock-bild-portrait-of-confident-senior-business-woman-standing-in-office-with-her-arms-crossed-mature-female-1156978234.jpg')";

 //  bild.style["background-image"] =  "url('" +  defaultpic + "')";
 alert (bild.style["background-image"]) ;
 bild.style["background-size"] = "300px";
 bild.style["background-repeat"] = "no-repeat";
 bild.style["background-position"] = "center";
 bild.style["border-radius"] = "50%";
 bild.style["background-clip"] = "border-box";
 bild.style["transition"] = "background-size 0.2s";
 bild.style["transition-timing-function"] = "cubic-bezier(.07,1.41,.82,1.41)";
 bild.style["display"] = "block";
 bild.style["width"] = "100px";
 bild.style["height"] = "100px";

 bild.style["text-decoration"] = "none";
 bild.style["cursor"] = "pointer";
 bild.style["overflow"] = "hidden";
 bild.style["text-indent"] = "100%";
 bild.style["white-space"] = "nowrap";

 container.style["position"] = "relative";
 container.style["font-family"] = "Arial";

 text.style["position"] = "center";
 text.style["bottom"] = "5px";
 text.style["left"] = "1px";
 text.style["color"] = "white";