2 prolovecui Prolovecui 于 2014.12.08 00:14 提问

关于JS修改网页元素的问题

亲们,我个JS问题啊。怎样在一个元素被创建后,立即执行某个JS函数呢?

3个回答

hwx4329
hwx4329   2014.12.08 15:53
已采纳

定时判断吧,把握好开启和关闭定时器的时机和频率,还是很可行的!
给你一个类似的判断CSS加载完毕的例子:

var com_private_setInterval_id = null;
var com_private_setInterval_count = 0;

/*校验样式是否加载完毕*/
function setCssListener() {
com_private_setInterval_id = setInterval(function() {
com_private_setInterval_count++;
if ($("#isLoaded").css("height") == "1px") {
clearInterval(com_private_setInterval_id);
onCssFinish();
}
if (com_private_setInterval_count * 200 > 10 * 1000) {
clearInterval(com_private_setInterval_id);
alert("加载公共CSS超时!");
}
}, 200);
};

用的时候重写onCssFinish()就OK。

Prolovecui
Prolovecui 研究了这么久,发现还是定时判断最满足实际需要啊,虽然资源有点消耗,但还是可以接受的,还可以大致控制延迟多久修改。
3 年多之前 回复
BossDarcy
BossDarcy   2014.12.08 08:50

JQuery中提供了一个DOM元素插入事件 DOMNodeInserted ,我们可以通过监听这个事件来实现,这篇文章介绍了如何在a标签创建的时候执行js处理。
js设置链接为新标签打开

Prolovecui
Prolovecui DOMNodeInserted事件对于动态创建的元素貌似无效哇。。
3 年多之前 回复
showbo
showbo   Ds   Rxr 2014.12.08 08:56

你创建元素后直接执行代码就行了吧。。DOMNodeInsertedIntoDocument事件兼容性有问题。。

判定元素正在插入到DOM树——DOMNodeInsertedIntoDocument

showbo
showbo 回复Prolovecui: 他不是往指定的对象添加内容吗,你给那个内容容器添加这个事件就行了。如果你想偷懒就直接往body添加,但是如果有其他的带代码也添加内容到body就会触发很多次了。所以你要锁定下对象范围。
3 年多之前 回复
Prolovecui
Prolovecui 回复showbo: 这个是在动态元素创建时添加绑定事件,但创建那个元素的JS却无法修改,也就是不能添加监听事件。看来还是不好弄啊。
3 年多之前 回复
showbo
showbo 回复Prolovecui: 可以的,你要在元素创建后在绑定DOMNodeInserted事件,要不元素不存在你绑定无效 <script> window.onload = function () { document.body.innerHTML = '<div id="dv"></div>';//动态创建这个dv元素 var dv = document.getElementById('dv'); dv.addEventListener('DOMNodeInserted', function () {//绑定事件 alert('内容变更') }, false); setTimeout(function () { dv.innerHTML = new Date().toLocaleString(); }, 1000); } </script>
3 年多之前 回复
Prolovecui
Prolovecui 回复showbo: 试过DOMNodeInserted时间,没有效果啊,貌似其不支持动态创建的元素。
3 年多之前 回复
showbo
showbo 回复Prolovecui: 你要是不想兼容IE,可以使用DOMNodeInsertedIntoDocument事件,具体使用看连接里面
3 年多之前 回复
Prolovecui
Prolovecui 回复showbo: 的确,定时判定的确耗费资源;但onload事件却会等网页全部加载完毕后才能执行,有明显延迟,无法做到“立即”执行啊,有更好的实现吗?就是尽可能早的判定到指定元素被创建,然后执行。
3 年多之前 回复
showbo
showbo 回复Prolovecui: DEMO:<div id="dv"></div> <script> window.onload = function () { var dv = document.getElementById('dv'), childCount = dv.childNodes.length; setInterval(function () { if (dv.childNodes.length != childCount) { alert('dv对象节点发生改变'); childCount = dv.childNodes.length; } }, 200); //200ms检查一次 setTimeout(function () { dv.innerHTML = new Date().toLocaleString(); }, 1000); } </script>
3 年多之前 回复
showbo
showbo 回复Prolovecui: DOMNodeInsertedIntoDocument事件只有firefox, webkit支持,而且这个事件也将废除,所有有兼容性问题。你想要兼容ie,可以用定时器定时监视被插入对象的子元素,发生改变后触发你的事件,比较耗资源的操作。
3 年多之前 回复
Prolovecui
Prolovecui 元素是由别的JS动态创建的,那个JS也不能修改啊;需要独立的函数来实现判定,执行的。 DOMNodeInserted,这个事件貌似没有用啊?
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
树形菜单树形菜单树形菜单树形菜单
关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页
Javascript 如何访问 和 修改CSS样式(网页样式)
Javascript 访问修改页面元素的CSS样式,一般有两种方法 一种方法是访问修改元素中style属性的CSS样式,一般这样的style属性是直接写在元素上的,而不是在外部的CSS文件中;另一种方法是访问外部的CSS文件,然后修改CSS样式,下面对这两种方法进行介绍。 1.
JS函数修改html的元素内容,及修改属性内容
修改元素内容: Hello 按钮 function demo(){ var nv = document.getElementById("pid"); nv.innerHTML="World"; } 修改元素标签属性: 呵呵 按钮 function demo(){ document.getElementById("aid").href=
前端:屏蔽F12审查元素,禁止修改页面代码
众所周知,审查元素的情况下,大家都可以随机更改一部分页面的代码, 注入恶意JS等等,这种情况避免也不难,虽然还能看到一部分H5源码,但是无法修改 一、屏蔽F12 审查元素 document.onkeydown = function(){ if(window.event && window.event.keyCode == 123) { alert("F
js里使用的各种元素大小尺寸属性总结
div元素: getComputedStyle(element, null).width,getComputedStyle(element, null).height:元素内容区域尺寸,不包含外边距,边框以及内边距(IE8及以下使用element.currentStyle代替getComputedStyle()); clientWidth,clientHeight:元素可视区域尺寸,内边距以内
web 页面阻止用户F12篡改页面元素和数据
web 页面阻止用户F12篡改页面元素和数据 Js代码   "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   "http://www.w3.org/1999/xhtml">      "Content-T
HTML、css、js控制页面元素的显示及个人对浮动的理解
一、HTML、jQuery、css都有自己的控制元素隐藏与显示的功能。 HTML使用hidden属性 jQuery使用hide(),show(),toggle(),fadeIn(),fadeOut(),fadeTo(),fadeToggle(),slideDown(), slideUp(),slideToggle() css控制元素的隐藏与显示,有display和visibility属性(
使用JS动态改变元素样式
今天写了个小网页,需要使用JS动态改变元素样式,结果很多麻烦,从网上找了一些解决办法总算搞定。总结一下    改变样式有三种办法,xxx.style.styleName ,xxx.style.cssText,和xxx.className    光文字不好说啊,还是举栗子吧    假定var mydiv=document.getElementById("div1");  第一种 mydiv.
js中改变元素的属性
js中改变元素属性的方法     1、js中改变元素的属性值        格式:某元素.style.某属性 = '改变值';        例如:oDiv.style.width = '300px';        在js中如果遇到类似font-size这种属性,需要将其写为fontSize,在对它的值进行改变 2、js中改变元素的浮动值时会遇到兼容性的问题         IE情况
27、Selenium + Python 实现 UI 自动化测试-调用 JavaScript 修改元素属性
前面在讲 Selenium 操作日期时间控件的时候,遇到过这样的问题:某些时候日期时间框有个readonly 属性,不允许直接输入,当时解决的办法是,删除掉这个属性,然后再输入。结合我们之前学的 JavaScript 可以操作HTML 元素属性的知识,今天再回头看一下。 1、实例1:删除属性值,使只读元素可以输入 内容请参考:http://blog.csdn.net/duzilongl