javascript：js 读写 style属性（DOM模型）

javascript：js 读写 style属性（DOM模型）

 

 

 

 

一、说明：

 

　　1、js读取style属性，需要去掉css格式中的“-”，“-”后面的第一个字母大写。js中的减号（“-”），与css中属性的连接符（“-”），有冲突。js要去掉css属性中的“-”，“-”后第一个字母大写。（类似变量的“小驼峰”命名法）

　　　　1.1、css中的属性写法：.bl {  background-color: red;  }

　　　　1.2、js中的写法：document.getElementById("uid").style.backgroundColor = "red";

 

 

 

 

二、代码  

 

// html


<div>
  <button class="mtb-20" onclick="cht()">更新表格</button>
  <button class="mtb-20" onclick="clean()">清除表格</button>
</div>

<table id="tbl" class="mtb-20" onclick="insert()">
  <thead>
    <tr>
       <th>id</th>
       <th>name</th>
       <th>tel</th>
    </tr>
  </thead>
  
  <tbody id="tbd">
    <tr id="tb1" name="row" ondblclick="chg()" >
      <td id="u10">20230001</td>
      <td id="u11">cat</td>
      <td id="u12">13011112002</td>
    </tr>
  </tbody>
</table>




// css


table, tr, th, td
{
  border-collapse: collapse;
  border: 1px solid black;
  padding: 6px;
}

.mtb-20
{
  margin: 20px 0;
}




// js


// set values of text of elements
function ch(id, name, tel)
{
  var uid = document.getElementById("u10");
  var uname = document.getElementById("u11");
  var utel = document.getElementById("u12");
  
  uid.innerHTML = id;
  uname.innerHTML = name;
  utel.innerHTML = tel;
}


// change some contents
function cht()
{
  var id = "20230002";
  var name = "laohu";
  name = name.big();
  var tel = "18733332002";
  ch(id, name, tel);
}


// for test events
function test()
{
  window.alert("333");
}


// chang color of font 
function chg()
{ 
  var len = document.getElementsByName("row").length;
  for(var i = 0; i < len; i++)
  {
    var e = document.getElementsByName("row")[i].style;
    e.setProperty("color", "blue", "important");
  }
}


// set to default value.
function clean()
{
  var len = document.getElementsByName("row").length;
  for(var i = 0; i < len; i++)
  {
    var e = document.getElementsByName("row")[i].style;
    e.setProperty("color", "black", "important");
  }
}


// create new lines of table
function insert()
{  
 
  // numbers of tr
  var num = document.getElementsByTagName("tr").length;
  
  
  // er = elements of tr
  var er = document.getElementsByTagName("tr");
  
  
  // change attributes of font of tr
  for(var i = 0; i < num; i++)
  {
    er[i].style.color = "#ff0099";
    er[i].style.fontSize = "1rem";
    er[i].style.backgroundColor = "white";
    
    // style 属性读取：去掉“-”，后面的字母大写；js使用“小驼峰命名法”
    // css的写法：background-color:red;
    // js读取“style属性”的写法：elem.style.backgroundColor="red";
  }
  
  // control numbers of tr
  var tr_size = 5;
  if( num < tr_size )
  {
      
      // window.alert(num);
      
      var pos = document.getElementById("tbd");
      
      // element of tr
      var etr = document.createElement("tr");
      
      // element of td
      var etd1 = document.createElement("td");
      // element of text
      var etxt1 = document.createTextNode("20230004");
      etd1.appendChild(etxt1);
      
      var etd2 = document.createElement("td");
      var etxt2 = document.createTextNode("novice");
      etd2.appendChild(etxt2);
      
      var etd3 = document.createElement("td");
      var etxt3 = document.createTextNode("13622226006");
      etd3.appendChild(etxt3);
      
      etr.appendChild(etd1);
      etr.appendChild(etd2);
      etr.appendChild(etd3);
      
      pos.appendChild(etr);   
  }
  
}

 

 

 

 

三、运行结果

 

　　1、运行前

 

　　2、运行后 

 

 

 

 

 

四、参考资料：

 

　　1、js工具箱：https://c.runoob.com/front-end/61/

 

　　2、读写HTML DOM style对象属性:　　 https://blog.csdn.net/drawlessonsfrom/article/details/114274561

 

　　3、HTML DOM style 属性: 　　https://www.runoob.com/jsref/prop-element-style.html