在html中根据标签的class、id来获取/修改对应标签的值、属性

爱被打了一巴掌 2022-05-18 06:43 588阅读 0赞

### html中根据class和id获取/修改标签的值、属性 ###

#### 利用id获取： ####

var x=document.getElementById("main");

##### 利用id修改样式： #####

document.getElementById('header_body').style.paddingRight ="0px";

##### 多个属性： #####

var a = document.getElementById("idname");
    
    with(a.style){
    
    color = red;
    
    font-size = 12px;
    
    .......
    
    }

##### 盒子标签和属性对照（其实就是有-对应成小驼峰） #####

<table> 
 <thead> 
  <tr> 
   <th>CSS语法（不区分大小写）</th> 
   <th>JavaScript语法（区分大小写）</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border</td> 
   <td>border</td> 
  </tr> 
  <tr> 
   <td>border-bottom</td> 
   <td>borderBottom</td> 
  </tr> 
  <tr> 
   <td>border-bottom-color</td> 
   <td>borderBottomColor</td> 
  </tr> 
  <tr> 
   <td>border-bottom-style</td> 
   <td>borderBottomStyle</td> 
  </tr> 
  <tr> 
   <td>border-bottom-width</td> 
   <td>borderBottomWidth</td> 
  </tr> 
  <tr> 
   <td>margin</td> 
   <td>margin</td> 
  </tr> 
  <tr> 
   <td>margin-bottom</td> 
   <td>marginBottom</td> 
  </tr> 
  <tr> 
   <td>margin-left</td> 
   <td>marginLeft</td> 
  </tr> 
  <tr> 
   <td>margin-right</td> 
   <td>marginRight</td> 
  </tr> 
  <tr> 
   <td>margin-top</td> 
   <td>marginTop</td> 
  </tr> 
  <tr> 
   <td>padding</td> 
   <td>padding</td> 
  </tr> 
  <tr> 
   <td>padding-bottom</td> 
   <td>paddingBottom</td> 
  </tr> 
  <tr> 
   <td>padding-left</td> 
   <td>paddingLeft</td> 
  </tr> 
 </tbody> 
</table>

#### 利用class修改样式： ####

注意几个地方：

1.  class前面需要加.
2.  一个标签有多个样式，每个样式前都需要加.
3.  如果是子类，中间是需要有空格的（最好的办法就是F12找到这个样式，直接复制，然后在每个样式前加.）

##### 利用class修改样式： #####

$(".skin-blue.sidebar-mini").css("padding-right","0px");
    
     //多个样式：
    $(".skin-blue.sidebar-mini").css({
     "color":"white",
      "background-color":"#98bf21",
    "font-family":"Arial",
    "font-size":"20px",
     "padding":"5px"
     });

#### 直接对标签样式修改： ####

$("p").css({
      "color":"white",
      "background-color":"#98bf21",
      "font-family":"Arial",
      "font-size":"20px",
      "padding":"5px"
      });

#### 其他 ####

这些操作都是需要写在function里面，作为一个小白，通常的方式是：