HTMLDOM_innerHEML、样式控制

HTMLDOM_innerHEML

HTML DOM

　　1. 标签体的设置和获取：innerHTML

　　2. 使用html元素对象的属性

　　3. 控制元素样式

使用元素的style属性来设置

　　如：

　　//修改样式方式1

　　　　div1.style.border = "1px solid red";

　　　　div1.style.width = "200px";

　　　　//font-size--> fontSize

　　　　div1.style.fontSize = "20px";

提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTMLDOM</title>
</head>
<body>

<!--id为div1的标签-->
<div id = "div1">
  div
</div>


<script >

<!--  获取div1-->
  var div = document.getElementById("div1");

  //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
  var innerHTML = div.innerHTML;

  //页面展示
  //alert(innerHTML);

  //div标签中替换一个文本输入框
  // div.innerHTML = "<input type = 'text'>";

  //div标签中追加一个文本输入框
  div.innerHTML += "<input type = 'text'>";


</script>
</body>
</html>

 

HTMLDOM_样式控制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>控制样式</title>


  <style>
/*<!--    id为d1的标签-->*/
    d1{

      /*边框1，实线，红色*/
      border: 1px solid red;

      /*宽100*/
      width: 100px;

      /*高100*/
      height: 100px;
    }

    /*id为d2的标签*/
    d2{

      /*边框1，实线，蓝色*/
      border: 1px solid blue;

      /*宽200*/
      width: 200px;

      /*高200*/
      height: 200px;
    }


  </style>
</head>
<body>

<!--id为-->
<div id="div1">
  div1
</div>

<div id="div2">
  div2
</div>


<script>
  var div1 = document.getElementById("div1");
  div1.onclick = function(){
    //修改样式方式1
    div1.style.border = "1px solid red";

    div1.style.width = "200px";

    //font-size--> fontSize
    div1.style.fontSize = "20px";

  }


  var div2 = document.getElementById("div2");
  div2.onclick = function(){
    div2.className = "d1";
  }


</script>

</body>
</html>

 

posted @ 2022-10-27 15:10  漁夫  阅读(31)  评论(0)    收藏  举报