Kaedah pengubahsuaian: 1. Gunakan "elemen.style.attribute name="value""; 2. Gunakan "element.setAttribute('attribute name','value')" 3. Gunakan "element. setAttribute('style','Attribute name: value')"; 4. Gunakan "element.className='value'".
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.
1 Tetapkan atribut gaya secara langsung Dalam sesetengah kes, gunakan tetapan ini adalah tidak sah
Jika atribut mempunyai tanda '-', tuliskannya! dalam kes unta (seperti textAlign) Jika anda ingin mengekalkan tanda -, gunakan elemen bentuk kurungan segi empat sama.style['text-align'] = '100px';
element.style.height = '100px';
2 . Tetapkan atribut secara langsung (hanya Boleh digunakan untuk atribut tertentu dan gaya yang berkaitan akan dikenali secara automatik)
element.setAttribute('height', 100); element.setAttribute('height', '100px');
3 Tetapkan atribut gaya
element.setAttribute('style', 'height: 100px !important');
4. Gunakan setProperty Jika anda ingin menetapkan !important, disyorkan untuk menggunakan kaedah ini untuk menetapkan parameter ketiga
element.style.setProperty('height', '300px', 'important');
5. Tukar kelas, seperti kaedah menukar kelas JQ
Oleh kerana JS tidak boleh mendapatkan elemen pseudo css, anda boleh menukar gaya elemen pseudo secara dinamik dengan menukar kelas daripada induk elemen pseudo
element.className = 'blue'; element.className += 'blue fb';
6. Tetapkan cssText
element.style.cssText = 'height: 100px !important'; element.style.cssText += 'height: 100px !important';
7 >
function addNewStyle(newStyle) { var styleElement = document.getElementById('styles_js'); if (!styleElement) { styleElement = document.createElement('style'); styleElement.type = 'text/css'; styleElement.id = 'styles_js'; document.getElementsByTagName('head')[0].appendChild(styleElement); } styleElement.appendChild(document.createTextNode(newStyle)); } addNewStyle('.box {height: 100px !important;}');
[Pembelajaran yang disyorkan:
// 在原有样式操作 document.styleSheets[0].addRule('.box', 'height: 100px'); document.styleSheets[0].insertRule('.box {height: 100px}', 0); // 或者插入新样式时操作 var styleEl = document.createElement('style'), styleSheet = styleEl.sheet; styleSheet.addRule('.box', 'height: 100px'); styleSheet.insertRule('.box {height: 100px}', 0); document.head.appendChild(styleEl);
Atas ialah kandungan terperinci Bagaimana untuk mengubah suai gaya css dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!