Bagaimana untuk mengubah suai gaya css dengan javascript

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

8. Gunakan addRule, insertRule

[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);

tutorial lanjutan javascript

]

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!