Dynamiczna zmiana atrybutu stylu elementu za pomocą JavaScript

Mam określony arkusz stylów dla div. Teraz chcę dynamicznie zmodyfikować jeden atrybut div za pomocą js.

Jak mogę to zrobić?

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

Czy to jest poprawne?

Prawie się zgadza.

Ponieważ -jest operatorem javascript, tak naprawdę nie można go mieć w nazwach właściwości. Gdybyś ustawił borderlub zamiast tego coś takiego jednowyrazowego, twój kod działałby dobrze.

Jednak rzeczą, o której musisz pamiętać padding-top, i dla każdej nazwy atrybutu z łącznikiem, jest to, że w javascript usuwasz łącznik i tworzysz następną literę wielką, więc w twoim przypadku tak będzie paddingTop.

Jest kilka innych wyjątków. JavaScript ma kilka zarezerwowanych słów, więc floatna przykład nie możesz ich tak ustawić . Zamiast tego w niektórych przeglądarkach musisz używać, cssFloataw innych styleFloat. W przypadku takich rozbieżności zaleca się użycie struktury takiej jak jQuery, która obsługuje niezgodności przeglądarek za Ciebie ...

Oprócz innych odpowiedzi, jeśli chcesz użyć notacji myślnika we właściwościach stylu, możesz również użyć:

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

Podobny problem rozwiązuję z:

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

Mam nadzieję, że to pomoże.

Jest też style.setPropertyfunkcja:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

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

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

Zakładając, że masz taki HTML:

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

Jeśli chcesz zmodyfikować atrybut stylu tego elementu div, użyj

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

Zastąp [ATTRIBUTE]żądanym atrybutem stylu. Pamiętaj, aby usunąć znak „-” i uczynić następującą literę wielką literą.

Przykłady

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

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

będzie

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

Zalecałbym użycie funkcji, która akceptuje identyfikator elementu i obiekt zawierający właściwości CSS, aby sobie z tym poradzić. W ten sposób piszesz wiele stylów na raz i używasz standardowej składni właściwości 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'});

Jeszcze lepiej byłoby przechowywać style w zmiennej, co znacznie ułatwi zarządzanie nieruchomością np

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

Mam nadzieję, że to pomoże

Zaskoczony , że nie widziałem poniższego rozwiązania selektora zapytań ,

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

Rozwiązania CSSStyleDeclaration , przykład przyjętej odpowiedzi

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

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

również wykonałby swoją pracę.

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

pracuje dla mnie