JS添加Style

一、JS添加style

在HTML中，我們可以通過以下方式來添加樣式表：

<head>
<style>
/*在這裡添加樣式表代碼*/
</style>
</head>

但是如果我們想要動態地添加CSS樣式，就需要使用JavaScript。我們可以通過以下方法來實現：

/*獲取head部分*/
var head=document.getElementsByTagName('head')[0];

/*創建一個style標籤*/
var style=document.createElement('style');

/*添加樣式代碼*/
style.type='text/css';
style.innerHTML='body{color:red}';

/*將style標籤添加到head中*/
head.appendChild(style);

在上面的代碼中，我們先通過getElementsByTagName()方法獲取了head元素。然後使用createElement()方法創建了一個style標籤，接著通過innerHTML屬性添加了CSS代碼。最後將style標籤添加到head元素中。

二、JS添加Style的內容

在JS中，添加CSS樣式，我們可以使用以下幾種方法：

1.通過style屬性添加樣式

/*獲取元素*/
var box=document.getElementById('box');

/*添加樣式*/
box.style.width='200px';
box.style.height='200px';
box.style.backgroundColor='red';

在上面的代碼中，我們先通過getElementById()方法獲取了id為box的元素。然後使用style屬性添加樣式。

2.通過setAttribute()方法添加樣式

/*獲取元素*/
var box=document.getElementById('box');

/*添加樣式*/
box.setAttribute('style','width:200px; height:200px; background-color:red;');

在上面的代碼中，我們同樣是先通過getElementById()方法獲取了id為box的元素。然後使用setAttribute()方法添加樣式。

3.通過className屬性添加樣式

/*獲取元素*/
var box=document.getElementById('box');

/*添加樣式*/
box.className='box';

在上面的代碼中，我們同樣是先通過getElementById()方法獲取了id為box的元素。然後使用className屬性添加樣式。其中，.box為在樣式表中定義的box類，通過動態地添加className屬性，就可以為元素添加樣式。

三、JS添加CSS樣式

除了上面提到的添加樣式的方法，我們還可以通過直接給元素添加style屬性來添加CSS樣式：

/*獲取元素*/
var box=document.getElementById('box');

/*添加樣式*/
box.style.width='200px';
box.style.height='200px';
box.style.backgroundColor='red';

在上面的代碼中，我們通過獲取id為box的元素，然後直接給它添加style屬性，並賦以值來添加CSS樣式。

四、JS添加兄弟元素

我們可以通過以下兩種方式，添加兄弟元素：

1.使用insertBefore()方法

/*獲取元素*/
var box=document.getElementById('box');

/*創建要添加的元素*/
var newBox=document.createElement('div');
newBox.innerHTML='我是添加的兄弟元素';

/*獲取box的父節點*/
var parent=box.parentNode;

/*添加兄弟元素*/
parent.insertBefore(newBox,box.nextSibling);

在上面的代碼中，我們先通過getElementById()方法獲取了id為box的元素，然後通過createElement()方法創建了一個新元素newBox，並設置innerHTML屬性的值。接著，通過parentNode屬性獲取box元素的父節點，最後通過insertBefore()方法將newBox元素添加到box元素的下一個兄弟節點中。

2.使用insertAdjacentHTML()方法

/*獲取元素*/
var box=document.getElementById('box');

/*添加兄弟元素*/
box.insertAdjacentHTML('afterend','<div>我是添加的兄弟元素</div>');

在上面的代碼中，我們同樣是先通過getElementById()方法獲取了id為box的元素。然後使用insertAdjacentHTML()方法添加新元素，其中第一個參數afterend表示在元素的後面添加，第二個參數是要添加的HTML代碼。

五、JS添加節點

我們可以使用以下兩種方式來添加節點：

1.使用appendChild()方法

/*獲取元素*/
var parent=document.getElementById('parent');

/*創建要添加的元素*/
var newBox=document.createElement('div');
newBox.innerHTML='我是添加的節點';

/*添加節點*/
parent.appendChild(newBox);

在上面的代碼中，我們先通過getElementById()方法獲取了id為parent的元素，然後通過createElement()方法創建了一個新元素newBox，並設置innerHTML屬性的值。最後通過appendChild()方法將newBox元素添加到parent元素中。

2.使用insertBefore()方法

/*獲取元素*/
var parent=document.getElementById('parent');

/*創建要添加的元素*/
var newBox=document.createElement('div');
newBox.innerHTML='我是添加的節點';

/*添加節點*/
parent.insertBefore(newBox,parent.firstChild);

在上面的代碼中，我們同樣是先通過getElementById()方法獲取了id為parent的元素，然後通過createElement()方法創建了一個新元素newBox，並設置innerHTML屬性的值。最後通過insertBefore()方法將newBox元素添加到parent元素的最前面。

六、JS添加標籤

我們可以使用以下代碼來動態添加HTML標籤：

/*獲取元素*/
var parent=document.getElementById('parent');

/*添加標籤*/
parent.innerHTML+='<div>我是添加的標籤</div>';

在上面的代碼中，我們先通過getElementById()方法獲取了id為parent的元素，然後通過innerHTML屬性動態添加HTML標籤。

七、JS添加div

我們可以使用以下代碼來動態創建並添加一個div元素：

/*獲取元素*/
var parent=document.getElementById('parent');

/*創建要添加的元素*/
var newBox=document.createElement('div');
newBox.innerHTML='我是添加的div元素';

/*添加元素*/
parent.appendChild(newBox);

在上面的代碼中，我們同樣是先通過getElementById()方法獲取了id為parent的元素，然後通過createElement()方法創建了一個新div元素newBox，並設置innerHTML屬性的值。最後通過appendChild()方法將newBox元素添加到parent元素中。

八、JS添加DOM

我們可以使用以下代碼來動態添加DOM元素：

/*獲取元素*/
var parent=document.getElementById('parent');

/*創建要添加的DOM元素*/
var newBox=document.createTextNode('我是添加的DOM元素');

/*添加元素*/
parent.appendChild(newBox);

在上面的代碼中，我們同樣是先通過getElementById()方法獲取了id為parent的元素，然後通過 createTextNode()創建一個文本類型的節點newBox，並設置節點的內容。最後通過appendChild()方法將newBox節點添加到parent元素中。

九、JS添加樣式

我們可以使用以下代碼來為元素添加樣式：

/*獲取元素*/
var box=document.getElementById('box');

/*添加樣式*/
box.style.color='red';
box.style.fontSize='16px';
box.style.fontWeight='bold';

在上面的代碼中，我們先通過getElementById()方法獲取了id為box的元素，然後使用style屬性來添加CSS樣式。

十、JS添加id屬性選取

我們可以通過以下代碼來動態添加id屬性並選取元素：

/*創建要添加的元素*/
var newBox=document.createElement('div');
newBox.innerHTML='我是添加了id的元素';

/*添加id屬性*/
newBox.id='newBox';

/*獲取元素*/
var element=document.getElementById('newBox');

在上面的代碼中，我們通過createElement()方法創建了一個新元素newBox，並設置innerHTML屬性的值。然後通過id屬性添加id屬性。最後通過getElementById()方法獲取id為newBox的元素。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/303460.html