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/n/303460.html