การเปลี่ยนแอตทริบิวต์สไตล์องค์ประกอบแบบไดนามิกโดยใช้ JavaScript

ฉันมีสไตล์ชีตบางอย่างสำหรับ div ตอนนี้ฉันต้องการแก้ไขแอตทริบิวต์หนึ่งของ div แบบไดนามิกโดยใช้ js

ฉันจะทำได้อย่างไร?

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

ถูกต้องหรือไม่

เกือบถูกต้องแล้ว

เนื่องจาก-เป็นตัวดำเนินการจาวาสคริปต์คุณจึงไม่สามารถมีสิ่งนั้นในชื่อคุณสมบัติได้ หากคุณกำลังตั้งค่าborderหรือใช้คำเดียวแบบนั้นแทนรหัสของคุณจะทำงานได้ดี

อย่างไรก็ตามสิ่งที่คุณต้องจำไว้padding-topและสำหรับชื่อแอตทริบิวต์ที่มียัติภังค์คือในจาวาสคริปต์คุณจะลบขีดกลางและสร้างตัวอักษรตัวถัดไปเป็นตัวพิมพ์ใหญ่ดังนั้นในกรณีของคุณก็จะเป็นpaddingTopเช่นนั้น

มีข้อยกเว้นอื่น ๆ JavaScript มีคำสงวนไว้บางส่วนดังนั้นคุณจึงไม่สามารถตั้งค่าfloatเช่นนั้นได้ แต่ในเบราว์เซอร์บางอย่างที่คุณจำเป็นต้องใช้งานและอื่น ๆcssFloat styleFloatสำหรับความคลาดเคลื่อนเช่นนี้ขอแนะนำให้คุณใช้เฟรมเวิร์กเช่น jQuery ซึ่งจัดการกับความเข้ากันไม่ได้ของเบราว์เซอร์สำหรับคุณ ...

นอกจากคำตอบอื่น ๆ แล้วหากคุณต้องการใช้เครื่องหมายขีดกลางสำหรับคุณสมบัติสไตล์คุณยังสามารถใช้:

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

ฉันแก้ไขปัญหาที่คล้ายกันกับ:

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

หวังว่าจะช่วยได้

นอกจากนี้ยังมีstyle.setPropertyฟังก์ชั่น:
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');

สมมติว่าคุณมี HTML ดังนี้:

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

หากคุณต้องการแก้ไขแอตทริบิวต์สไตล์ของ div นี้คุณจะต้องใช้

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

แทนที่[ATTRIBUTE]ด้วยแอตทริบิวต์สไตล์ที่คุณต้องการ อย่าลืมลบ '-' และทำให้ตัวอักษรต่อไปนี้เป็นตัวพิมพ์ใหญ่

ตัวอย่าง

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

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

จะ

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

ฉันขอแนะนำให้ใช้ฟังก์ชันซึ่งยอมรับรหัสองค์ประกอบและวัตถุที่มีคุณสมบัติ 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'});

ยังดีกว่าคุณสามารถจัดเก็บรูปแบบไว้ในตัวแปรซึ่งจะทำให้การจัดการทรัพย์สินง่ายขึ้นมากเช่น

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

หวังว่าจะช่วยได้

แปลกใจที่ฉันไม่เห็นวิธีแก้ปัญหาตัวเลือกแบบสอบถามด้านล่าง

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

โซลูชันCSSStyleDeclarationตัวอย่างของคำตอบที่ยอมรับ

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

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

ก็จะทำงาน

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

เหมาะกับฉัน