js指定diva样式（定义div样式）

发布时间：2023-12-08

js指定diva样式（定义div样式）

更新：<time datetime="2022-11-10 01:59">2022-11-10 01:59</time>

本文目录一览：

1、如何利用js向指定位置添加一个div层
2、如何利用js向指定位置添加一个div层？
3、用JS怎么写一个点击按钮就可以改变指定div的ID或者class名呢
4、怎么让js代码只作用在指定的范围（比如指定的div）

如何利用js向指定位置添加一个div层

1、利用js代码首先创建一个div，document.createElement('div');
2、确认div添加位置，可以在某个dom元素后面，或者通过css属性控制具体位置，主要通过left/top等属性控制。
3、确定位置之后，显示div即可。 示例：比如html中有一个文本输入框，我们现在需要在挨着输入框右下角位置显示一个div。

<input type="text" id="city" value="beijing"/>

方法：

function createDiv(){
    //首先创建div
    var descDiv = document.createElement('div');
    document.body.appendChild(descDiv);
    //获取输入框dom元素
    var text = document.getElementById('city');
    //计算div的确切位置
    var seatX = text.offsetLeft + text.offsetWidth; //横坐标
    var seatY = text.offsetTop + text.offsetHeight; //纵坐标
    //给div设置样式，比如大小、位置
    var cssStr = "z-index:5;width:420px;height:300px;background-color:#FFFF99;border:1px solid black;position:absolute;left:"
    + seatX + 'px;top:' + seatY + 'px;';
    //将样式添加到div上，显示div
    descDiv.style.cssText = cssStr;
    descDiv.innerHTML = '这是一个测试的div显示的内容';
    descDiv.id = 'descDiv';
    descDiv.style.display = 'block';
}

如何利用js向指定位置添加一个div层？

把外链接的JS加载到body后面，在这个JS里面用类似这样的代码：

var div = document.createElement('div'); // 新增元素
var diva = document.getElementById('a'); // 获取id为a的元素
diva.parentNode.insertBefore(div, diva); // 在这个元素前面增加上去

用JS怎么写一个点击按钮就可以改变指定div的ID或者class名呢

<!DOCTYPE html>
<html>
<head>
<style>
.c1{
    background:red;
}
.c2{
    background:blue;
}
</style>
</head>
<body>
<script>
function changeclass(){
    var divEle = document.getElementById('diva');
    divEle.className='c2'; //改变样式
    divEle.id='cccc'; //改变id
    var divEle2 = document.getElementById('cccc');
    alert("停顿");
    divEle.className='c1';
}
</script>
<div id='diva' class='c1'>111</div>
<input type='button' onclick='changeclass()' value='改变样式'/>
</body>
</html>

怎么让js代码只作用在指定的范围（比如指定的div）

在js或者jQuery下面得到指定的div下面的指定a标签的方法： 1、通过id直接获取所需a标签：$("#ids")
2、通过从属关系获得a标签：$("div a") 然后对取得的元素遍历，找到需要的a标签即可。

推荐文章