Odpowiedzi:
Prawie się zgadza.
Ponieważ -
jest operatorem javascript, tak naprawdę nie można go mieć w nazwach właściwości. Gdybyś ustawił border
lub 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 float
na przykład nie możesz ich tak ustawić . Zamiast tego w niektórych przeglądarkach musisz używać, cssFloat
aw 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";
document.getElementById("xyz").style["paddingTop"] = '10px'
.
Podobny problem rozwiązuję z:
document.getElementById("xyz").style.padding = "10px 0 0 0";
Mam nadzieję, że to pomoże.
0
. Czasami tego nie chcesz.
Jest też style.setProperty
funkcja:
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
float
.
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
document.getElementById("xyz").setAttribute('style','padding-top:10px');
również wykonałby swoją pracę.