JavaScript kullanarak öğe stili niteliğini dinamik olarak değiştirme

Bir div için belirli bir stil sayfam var. Şimdi js kullanarak bir div niteliğini dinamik olarak değiştirmek istiyorum.

Nasıl yapabilirim?

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

Bu doğru mu?

Neredeyse doğru.

Yana -bir javascript operatörüdür, gerçekten mülkiyet adlarında buna sahip olamaz. Ayar yapıyorsanız borderveya bunun yerine tek kelimeyle yazılmış bir şey olsaydı, kodunuz gayet iyi çalışırdı.

Bununla birlikte, padding-topve herhangi bir tireli öznitelik adı için hatırlamanız gereken şey , javascript'te kısa çizgiyi kaldırmanız ve sonraki harfi büyük harf yapmanızdır, yani sizin durumunuzda böyle olacaktır paddingTop.

Başka istisnalar da var. JavaScript'in bazı ayrılmış kelimeleri vardır, bu nedenle floatörneğin böyle ayarlayamazsınız . Bunun yerine, bazı tarayıcılarda size kullanımına ihtiyaç cssFloatve diğerlerinde styleFloat. Bunun gibi tutarsızlıklar için, sizin için tarayıcı uyumsuzluklarını ele alan jQuery gibi bir çerçeve kullanmanız önerilir ...

Diğer yanıtlara ek olarak, stil özellikleri için kısa çizgi notition kullanmak isterseniz şunları da kullanabilirsiniz:

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

Benzer sorunu şununla çözüyorum:

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

Umarım yardımcı olur.

Ayrıca bir style.setPropertyişlev vardır:
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');

Bunun gibi bir HTML'ye sahip olduğunuzu varsayarsak:

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

Bu div öğesinin stil özniteliğini değiştirmek isterseniz,

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

[ATTRIBUTE]İstediğiniz stil niteliğiyle değiştirin . '-' harfini kaldırmayı ve aşağıdaki harfi büyük yapmayı unutmayın.

Örnekler

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

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

olacak

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

Bunu işlemek için öğe kimliğini ve CSS özelliklerini içeren bir nesneyi kabul eden bir işlev kullanmanızı tavsiye ederim. Bu şekilde, aynı anda birden çok stil yazarsınız ve standart CSS özellik sözdizimini kullanırsınız.

//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'});

Daha da iyisi, stilleri bir değişkende saklayabilirsiniz, bu da mülk yönetimini çok daha kolay hale getirir, örn.

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

umarım yardımcı olur

Sürpriz aşağıda görmediğini sorgu seçici yolu çözümü,

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

CSSStyleDeclaration çözümleri, kabul edilen cevaba bir örnek

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

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

işi de yapacaktı.

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

benim için çalışıyor