經過JS動態的修改HTML元素的樣式和增添標籤元素等

時間 2020-07-23

原文原文鏈接

一. 經過JS動態的修改HTML元素的樣式

1. 要想在js中動態的修改HTML元素的樣式,首先須要寫document,

document咱們稱之爲文檔對象,這個對象中保存了當前網頁中全部的HTML標籤

代碼寫法以下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>51-自定義原型對象</title>
</head>
<body>
<div class="box" id="father">123</div>
<div class="box" id="son">456</div>
<script> console.log(document); </body>
</html>

2.上面的代碼執行後,能夠在瀏覽器控制檯console裏發現document文檔對象以下圖: html

3.展開document文檔對象,咱們能夠發現包含了當前網頁中全部的HTML標籤.以下圖: 瀏覽器

二. 在<script>標籤裏定義對象,

把document.querySelector("#son"); 賦值給div ; 格式: div=document.querySelector("須要選擇的標籤名稱");

也就是說在document文檔對象後寫querySelector來選擇一個id叫作son 的 div盒子賦給變量div

選擇了id選擇器後,即可以對這個ID對應的<div>盒子修改它的樣式

代碼以下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>51-自定義原型對象</title>
</head>
<body>
<div class="box" id="father">123</div>
<div class="box" id="son">456</div>
<script>
    //1.經過js代碼動態的找到HTML標籤
    //document咱們稱之爲文檔對象,這個對象中保存了當前網頁中全部的HTML標籤
   //2.如何經過JS動態的修改HTML元素的樣式
    var div=document.querySelector("#son"); console.log(div); div.style.width="200px"; div.style.height="200px"; div.style.backgroundColor="red"; div.style.borderRadius="50%"; </script>
</body>
</html>

三.如何動圖的建立一個HTML元素,

方法基本如上,

只是document後的querySelector改成createElement.

//如何動態的建立一個HTML元素 //格式: document. createElement. ("標籤的名稱")
var div=document. createElement. ("div") var div=document. createElement. ("p") var div=document. createElement. ("span")

四.如何動態建立的元素添加到另外一個元素中

1. 好比須要在<div>盒子標籤裏建立<p>標籤

1.1 首先選擇須要建立元素或者標籤的標籤div, 而後在調用賦值給對象div.

格式: var div=document.querySelector("div");

1.2 而後建立p標籤,並賦值給對象p

格式: var p=document.createElement("p");

1.3 而後把建立的<p>標籤傳入到調用的元素<div>標籤裏.

格式: 元素對象.appendChild(元素對象)

代碼: div. appendChild(p);

代碼以下所示:

var div=document.querySelector("div"); var p=document.createElement("p"); div. appendChild(p);

五.如何刪除一個指定元素或標籤

代碼以下:

// 如何刪除一個指定元素
var div=document.querySelector("div>a"); console.log(a) ; // 經過訪問一個元素對象的parentElement, 能夠找到當前元素對象的父元素(父節點)
 console.log(a. parentElement) ; //經過一個元素的父元素調用removeChild方法, 就能夠講該父元素中指定的子元素刪除
a. parentElement. removeChild(a) ;

六. 在js中如何不斷的重複執行某一段代碼?

1.方法一:

代碼以下圖:

註釋: 圖中代碼裏的seInterval(test, 1000);括號裏的第一個參數test參數是被執行的函數test;

第二個參數是毫秒,也就是須要隔多少時間執行一次.

//在js中如何不斷的重複執行某一段代碼 ?
function test(){ console.log ("test") } //每隔多少毫秒執行一次第一個參數(test函數)
setInterval(test, 1000) ;

2.方法二:

在企業開發中經常使用的方法: 給seInterval傳一個匿名函數,而後每隔1000毫秒執行一下匿名函數,

代碼以下:

var nm=1 ; function test(){ console.log ("test") } setInterval(function (){ console.log ("test", num) ; num++ ; }, 1000) ; //每執行一次匿名函數的代碼塊,就執行增量表達式num++.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。