js操作动态添加的元素的属性

zheyang
  • 135

页面上有个div是通过js加上的

<div class="bg"></div>

如何来在页面加载过程中改变这个div的属性(不能通过click等事件来改变),比如设置它的高度为100px

尝试过设置css,无效果

.bg{
    height:100px;
}

也尝试过

$(function(){
    $('.bg').css('height','100px')
})

都没有效果

回复
阅读 5.2k
6 个回答

你应该先F12调试一下,确定div已经加上,并且在改变它的属性之前,然后再看js终端,我觉得jquery那句应该是可以的,如果div已经被加

将函数改成.css({'width':'100px'});试试

对于动态添加的元素,原有的事件是不起作用的,你需要通过事件代理(事件委托)来处理,也就是在不会改变的父元素绑定事件,通过冒泡来判断来源哪个动态添加的子元素,然后触发。
新版的(1.7+)Jquery.on方法可以实现事件代理

首先 设置css是绝对有效的 css不受页面加载先后影响 只要这个样式在页面里 行间、内联、外联都无所谓
其次 js改变元素属性 jquery在页面初始化的时候 遍历了dom节点 之后动态加载的标签 根本就不在之前遍历的节点组里
操作这个节点的方法
1、你在插入这个元素之后执行相关事件方法
2、jquery的解决方案就是 on,live(1.7以下版本) 如果你确定有相关事件满足你的要求的话
on做了什么:根据你的参数对节点进行了遍历

下面这段代码生效的前提是: $('.bg')选中的DOM节点是在 执行下面这段之前 就已经生成了。否则是没有鸟用的。

$(function(){
    $('.bg').css('height','100px')
})

你问题里说这个div是通过js加上的对吧,那么就在这个append操作之后紧跟着加上:

$('.bg').css('height','100px')

记住,一定要放在同步操作的作用块里,异步也是不生效的。

看你也是用的jquery;可以这样使用:

$(function(){

    //即可在页面加载后操作动态加载的元素
    $('.bg').each(function(){
        $(this).css('height','100px');
    });

});
你知道吗?

宣传栏