我有一個(gè)div的特定樣式表。現(xiàn)在我想用js動(dòng)態(tài)修改div的一個(gè)屬性。

我該怎么做？

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

這是正確的嗎？

除了其他答案之外，如果您想要對(duì)樣式屬性使用破折號(hào)通知，也可以使用:

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

【編輯2023】很老的回答。我創(chuàng)建了一個(gè)小的庫來動(dòng)態(tài)地改變樣式@Github。

幾乎是正確的。

因?yàn)?是一個(gè)javascript操作符，所以在屬性名中不能有它。如果你使用setting、border或者類似的單個(gè)詞，你的代碼會(huì)工作得很好。

然而，對(duì)于padding-top和任何帶連字符的屬性名，你需要記住的是，在javascript中，你要去掉連字符，把下一個(gè)字母變成大寫，所以在你的例子中是padding-top。

還有一些其他的例外。JavaScript有一些保留字，所以你不能像那樣設(shè)置float。相反，在一些瀏覽器中你需要使用cssFloat，而在另一些瀏覽器中需要使用styleFloat。對(duì)于這種差異，建議您使用jQuery之類的框架來處理瀏覽器的不兼容性...

還有style.setProperty函數(shù): https://developer . Mozilla . org/en-US/docs/Web/API/CSSStyleDeclaration/set property

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

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

我解決了類似的問題:

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

希望有幫助。

假設(shè)您有這樣的HTML:

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

如果想修改這個(gè)div的樣式屬性，可以使用

document.getElementById('thediv').style[ATTRIBUTE] = '[VALUE]'

將[屬性]替換為所需的樣式屬性。記住去掉'-'，把下面的字母變成大寫。

例子

document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding

奇怪的是我沒有看到下面的查詢選擇器方式的解決方案，

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

CSSStyleDeclaration解決方案，一個(gè)被接受的答案的例子

document.getElementById('xyz').style.paddingTop = "10px";

將會(huì)

document.getElementById("xyz").style["paddingTop"] = '10px';

也會(huì)做這項(xiàng)工作。

我建議使用一個(gè)函數(shù)來處理這個(gè)問題，該函數(shù)接受元素id和包含CSS屬性的對(duì)象。通過這種方式，您可以一次編寫多個(gè)樣式，并使用標(biāo)準(zhǔn)的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'});

更好的是，你可以將樣式存儲(chǔ)在一個(gè)變量中，這將使屬性管理更加容易

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

希望有幫助

對(duì)我有用

我在Javascript函數(shù)中改變css樣式。

但未捕獲的類型錯(cuò)誤:bild為空。

如果我在一個(gè)普通html文件中運(yùn)行它，它會(huì)工作。

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";