JaveScript基础5 操作css样式

One 获取style里的内容

  <div id='box' style='width: 100px; height: 200px'></div>
  <script>
      var x = document.getElementById( 'box' );
          alert( x.sytle );
      </script>

1.png

获取得到的是css对象没办法得到里面的内容；
如果要得到内容 . 内容 → .width

  alert( x.style.width );

2.png

以上是单个行内样式的获取；

如果是获取整个的呢；

cssText

 alert( x.style.cssText );

3.png

这种方式只能获取行内样式的值
一般通过js是修改行内样式，如果修改内联样式跟外联样式还要考虑优先级；

修改行内样式

  <div id='box' style='width: 100px;height: 200px '></div>
  <script>
      var x = document.getElementById( 'box' );
          x.style.width = '200px'; 
  </script>

4.png

注意：对于修改 border-top 有 — 的属性时候；
js里的 - 表示减→ 所以在js里要用 borderTop 来修改

  <div id='box' style='width: 100px;height: 200px '></div>
  <script>
      var x = document.getElementById( 'box' );
          x.style.border-top =  '2px solid red'; 修改不了
  </script>

5.png

<div id='box' style='width: 100px;height: 200px '></div>
  <script>
      var x = document.getElementById( 'box' );
          x.style.borderTop =  '2px solid red'; 通过borderTop来修改
  </script>

6.png

<div id='box' style='width: 100px;height: 200px;background: red; '></div>
  <script>
      var x = document.getElementById( 'box' );
          x.style.backgroundColor = 'greed';
  </script>

一般修改背景颜色用backgroundColor，如果用background复合属性设置（万一有背景图片就会被覆盖）

多个属性一起设置：

  <div id='box' style='width: 100px; height: 100px;'></div>
  <script>
       var oBox = document.getElementById( 'box' );
           oBox.style.width = '200px';
           oBox.style.height = '300px';
           oBox.style.marginLeft = '100px';
           oBox.style.backgroundColor = 'green';
   </script>

综合写法：

  <script>
       var oBox = document.getElementById( 'box' );
           oBox.style.cssText = 'width: 200px; height: 300px; margin-left: 100px;background-color: green;';
   </script>

注意：cssText = ‘里面是字符串，跟行内样式写法一样’

7.png

以上方法会把 style 里全部换成 cssText 设置：

  <div id='box'; style='width: 100px;height: 100px;margin-tip: 100px;';></div>
  <script>
     var oBox = document.getElementById( 'box' );
          oBox.style.cssText = 'width: 200px; height: 300px; margin-left: 100px;background-color: green;';
  </script>

8.png

原来的margin-top也会被替换掉；
用什么方法不会出现这样：

 <div id='box'; style='width: 100px;height: 100px;margin-tip: 100px;';></div>
  <script>
     var oBox = document.getElementById( 'box' );
          oBox.style.cssText += 'width: 200px; height: 300px; margin-left: 100px;background-color: green;';
  </script>

9.png

+=会增加进入一样会覆盖掉不同的会加进

利用类名来操作样式

在内联样式中先定义好样式，利用js加进去；
→前提注意优先级问题\

  <style>
      .box2{
             width: 200px;
             height: 200px;
             background: red;             
       }
  </style>
  <body>
        <div id= 'box' ;></div>
        <script>
            var  oBox = document.getElementById( 'box' );
                 oBox.className = 'box2';
        </script>
  </body>

Q10.png

js操作内联样式

获取：

  <style id='hh' >
      #box{
                width: 200px;
                height: 200px;
                background: red;
    }
  </style>
  <body>
      <div id='box' ></div>
      <script>
          var sHh = document.getElementById ( 'hh' ) ;
                alert ( sHh.innerHTML ) ;
      </script>
  </body>

弹出标签style里的所有css样式

11.png

设置

语法：Obj . innerHTML = ' css样式 '; css样式写法跟我们内联样式写法一样

  <script>
      sHh.innerHTML = '#box{width: 400px;height: 400px;background-color: green;}';
  <script>

12.png