你知道怎么用原生 JS 设置样式么

passwdpqw 7年前
   <p>用JS来动态设置CSS样式,常见的有以下几种</p>    <p>1. 直接设置style的属性某些情况用这个设置 !important值无效</p>    <p>如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] = '100px';</p>    <pre>  <code class="language-javascript">element.style.height = '100px';  </code></pre>    <p>2. 直接设置属性(只能用于某些属性,相关样式会自动识别)</p>    <pre>  <code class="language-javascript">element.setAttribute('height', 100);  element.setAttribute('height', '100px');  </code></pre>    <p>3. 设置style的属性</p>    <pre>  <code class="language-javascript">element.setAttribute('style', 'height: 100px !important');  </code></pre>    <p>4. 使用setProperty如果要设置!important,推荐用这种方法设置第三个参数</p>    <pre>  <code class="language-javascript">element.style.setProperty('height', '300px', 'important');  </code></pre>    <p>5. 改变class比如JQ的更改class相关方法</p>    <p>因JS获取不到css的伪元素,所以可以通过改变伪元素父级的class来动态更改伪元素的样式</p>    <pre>  <code class="language-javascript">element.className = 'blue';  element.className += 'blue fb';  </code></pre>    <p>6. 设置cssText</p>    <pre>  <code class="language-javascript">element.style.cssText = 'height: 100px !important';  element.style.cssText += 'height: 100px !important';  </code></pre>    <p>7. 创建引入新的css样式文件</p>    <pre>  <code class="language-javascript">          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;}');    </code></pre>    <p>8. 使用addRule、insertRule</p>    <p><img src="https://simg.open-open.com/show/51e409b11aa51c150090697429a953ed.gif"></p>    <pre>  <code class="language-javascript">// 在原有样式操作          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);        </code></pre>    <p>用JS来动态设置CSS样式,常见的有以下几种</p>    <p>1. 直接设置style的属性某些情况用这个设置 !important值无效</p>    <p>如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] = '100px';</p>    <pre>  <code class="language-javascript">element.style.height = '100px';  </code></pre>    <p>2. 直接设置属性(只能用于某些属性,相关样式会自动识别)</p>    <pre>  <code class="language-javascript">element.setAttribute('height', 100);  element.setAttribute('height', '100px');  </code></pre>    <p>3. 设置style的属性</p>    <pre>  <code class="language-javascript">element.setAttribute('style', 'height: 100px !important');  </code></pre>    <p>4. 使用setProperty如果要设置!important,推荐用这种方法设置第三个参数</p>    <pre>  <code class="language-javascript">element.style.setProperty('height', '300px', 'important');  </code></pre>    <p>5. 改变class比如JQ的更改class相关方法</p>    <p>因JS获取不到css的伪元素,所以可以通过改变伪元素父级的class来动态更改伪元素的样式</p>    <pre>  <code class="language-javascript">element.className = 'blue';  element.className += 'blue fb';  </code></pre>    <p>6. 设置cssText</p>    <pre>  <code class="language-javascript">element.style.cssText = 'height: 100px !important';  element.style.cssText += 'height: 100px !important';  </code></pre>    <p>7. 创建引入新的css样式文件</p>    <pre>  <code class="language-javascript">          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;}');    </code></pre>    <p>8. 使用addRule、insertRule</p>    <p><img src="https://simg.open-open.com/show/51e409b11aa51c150090697429a953ed.gif" alt="你知道怎么用原生 JS 设置样式么" width="20" height="20"></p>    <pre>  <code class="language-javascript">// 在原有样式操作          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);        </code></pre>    <p> </p>    <p>来自:http://www.cnblogs.com/LiuWeiLong/p/6058059.html</p>    <p> </p>