首页 > 编程知识 正文

js指定diva样式(定义div样式)

时间:2023-12-04 11:49:59 阅读:311939 作者:MUCE

本文目录一览:

  • 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标签。$("diva");然后对取得的元素遍历,找到需要的a标签即可。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。