-
2019-08-06 17:10:01
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 200px; margin-bottom: 10px; background-color: #a43035; display: none; } </style> <script> //等待页面加载完成后才会执行。 window.onload = function () { //不爽的地方: //1. 代码比较麻烦,需要遍历,可能还需要嵌套。 //2. 找对象麻烦,方法少,还长 //3. 会有兼容性问题。 //4. 如果想要实现简单的动画效果 animate //5. js注册事件,会被覆盖,addEventListener var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var divs = document.getElementsByTagName("div"); btn1.onclick = function () { for (var i = 0; i < divs.length; i++) { divs[i].style.display = "block"; } }; btn2.onclick = function () { for (var i = 0; i < divs.length; i++) { //低版本火狐浏览器不支持innerText,支持textContent divs[i].innerText = "我是内容"; } }; }; </script> </head> <body> <input type="button" value="展示" id="btn1"> <input type="button" value="设置内容" id="btn2"> <div></div> <div></div> <div></div> </body> </html>
更多相关内容 -
关于script标签内脚本不执行的问题
2021-05-24 21:07:34好像是因为指定了src属性,浏览器加载src指定的外部脚本,而不执行script内部的脚本。 MDN的截图: 像下面这样就可以: <script> console.log(222); </script> 因为我贪图方便,直接在引用外部脚本的...我也是偶然遇到的。
<script src="test.js"> console.log(222); </script>
在以上代码中,script标签内的脚本将不会执行。好像是因为指定了src属性,浏览器加载src指定的外部脚本,而不执行script内部的脚本。
MDN的截图:
像下面这样就可以:<script> console.log(222); </script>
因为我贪图方便,直接在引用外部脚本的script标签内测试一些js的语法,然后居然没执行,就遇到了这个问题。
人生往往如此,碰到了,分别了,再也不见了。没有那些让人觉得哪怕物是人非,也有故事留心头 ——《剑来》
-
通过innerHTML动态插入的script无法执行的解决方法
2012-11-05 15:59:07很多时候,需要通过innerHTML动态插入javascript代码到指定的div中,或者通过ajax请求回来的内容里面包含javascript代码,然后把该代码插入指定的div中,但是插入后的script却无法执行。 原因:直接通过...很多时候,需要通过innerHTML动态插入javascript代码到指定的div中,或者通过ajax请求回来的内容里面包含javascript代码,然后把该代码插入指定的div中,但是插入后的script却无法执行。
原因:直接通过innerHTML动态嵌入的script,浏览器会当做普通的文本,不会当作SCRIPT节点维护到DOM里面,所以调用的时候找不到。
解决方法:用innerHTML嵌入以后,通过DOM从myDIV中取出嵌入的script节点,然后新创建一个script节点,并把嵌入的script里面的内容也赋给新创建的script节点,然后把这个新节点追加到页面的head节点中,这样就可以调用到里面的函数了。
比如下面的代码,加上红颜色的内容即可(firefox下测试通过,ie需要再调整一下语法)
<html>
<head></head>
<body>
<button οnclick="getContent();" name="getContent" id="getContent">Get Content</button>
<p></p>
<div id="myDiv"></div>
<p></p>
<script type="text/javascript">
function getContent() {
var str = "added content \<br\>" +
"\<input name=\'myname\' id=\'myname\'\>" +
"\<button οnclick=\'getName()\;\' name=\'getName\' id=\'getName\'\>Get Name\<\/button\>" +
"\<script type=\'text\/javascript\'\>" +
"function getName() {" +
"alert(\'ok\')\;" +
"document.getElementById(\'myname\').value = \'Bill\'\;" +
"}" +
"\<\/script\>";
document.getElementById("myDiv").innerHTML=str;
[color=red]var myDivScript = document.getElementById("myDiv").getElementsByTagName("SCRIPT").item(0);
var newScript = document.createElement("SCRIPT");
newScript.innerHTML = myDivScript.innerHTML;
document.getElementsByTagName("HEAD").item(0).appendChild(newScript);[/color]
}
</script>
</body>
</html> -
关于script在页面的最佳位置以及html执行顺序
2018-09-17 16:26:56脚本是则中断线程,待该script脚本执行结束之后程序才继续往下执行。 所以,大部分网上讨论是将script脚本放在<body>之后,那样dom的生成就不会因为长时间执行script脚本而延迟阻塞,...首先需要知道:
html文件是自上而下的执行方式,但引入的css和javascript的顺序有所不同,css引入执行加载时,程序仍然往下执行,而执行到<script>脚本是则中断线程,待该script脚本执行结束之后程序才继续往下执行。
所以,大部分网上讨论是将script脚本放在<body>之后,那样dom的生成就不会因为长时间执行script脚本而延迟阻塞,加快了页面的加载速度。
但又不能将所有的script放在body之后,因为有一些页面的效果的实现,是需要预先动态的加载一些js脚本。所以这些脚本应该放在<body>之前。
其次,不能将需要访问dom元素的js放在body之前,因为此时还没有开始生成dom,所以在body之前的访问dom元素的js会出错,或者无效。
<!DOCTYPE html> <html> <head></head> <script type="text/javascript"> document.getElementById("text").innerHTML = "Test script"; </script> <body> <h1 id="text"></h1> </body> </html>
控制台将出现:Uncaught TypeError: Cannot set property 'innerHTML' of null
at test.html?__hbt=1537172343687:5将script脚本放在body之后:
<!DOCTYPE html> <html> <head></head> <body> <h1 id="text"></h1> </body> <script type="text/javascript"> document.getElementById("text").innerHTML = "Test script"; </script> </html>
显示正常。
总结: 参考认为script放置位置的原则“页面效果实现类的js应该放在body之前,动作,交互,事件驱动,需要访问dom属性的js都可以放在body之后”
-
如何在点击一个<div>时去执行一个javascript里的函数?
2018-05-18 10:43:17调用,但我将它改成div id="a" onclick="a()"调用函数a/div,为什么就调用不了了? ``` <script> function a(){ ... } </script> ${pageContext.request.contextPath }/login.action" method=... -
js动态创建div
2017-03-20 19:06:32js动态创建div1.创建某个标签:如下在body中创建一个div的事例; <script> function fun(){ var frameDiv = document.createElement("div");//创建一个标签 var bodyFa = document.getElementById("bodyid");//通过... -
div拖拽实现延伸
2018-07-12 15:00:37div拖拽 原理: 鼠标事件 mousedown mousemove mouseup 注意事项: 被拖动的div的position属性值一定是absolute。 onmousedown事件需要在window.onload时加载。 如果被拖动的div上有文字会有自带的文字... -
vue+element项目里实时监听某个div宽度的变化,然后执行相应的事件
2019-04-12 17:40:56背景:vue项目中用到echarts图表,页面上有侧边栏,侧边栏收缩图表不能自适应,想通过监听内容部分的宽度让图表resize,试过window带的resize,只能监听浏览器窗口大小变化,为了监听某元素区域的变化而使echarts的... -
js动态创建和删除div
2017-01-20 16:43:03研究了一下js的动态生成div功能。特此一记: var i=1; function cDiv(){ var oDiv=document.createElement("div"); oDiv.style.border="1px solid black"; oDiv.style.width="500px"; oDiv.style.height="300px"; ... -
div左/右键点击执行事件
2018-01-16 13:53:59////点击子级div时,不想执行上面方法,可解绑自定义的点击事件 //$(".left-right-click").unbind("mousedown").bind("contextmenu", function (e) { // e.preventDefault(); // return false; ... -
innerHTML中script脚本不执行的问题
2014-02-10 15:53:38有一个div1,我希望向后台发送请求,然后这个请求会返回一个html页面代码,我希望把返回内容填充到div1里,但是html里所包含的script将不会执行。有一个好的办法就是不要用innerHTML,而是用jquery的load方法 -
JS中div的动态添加
2018-10-12 01:48:08//添加一个500*500的div快 <div id="aa" style="width:500px;height:500px;background-color:#999;"> </div> //添加一个500*500的表格 <div id=&... -
如何强制子div为父div的高度的100%而不指定父级的高度?
2020-01-18 10:58:48我有一个具有以下结构的网站: <div id="header"></div> <div id="main"> <div id="navigatio -
script setup 语法使用
2021-08-18 14:57:25vue3.2正式版已经发布,script setup语法已经由实验性质改为了正式语法,可以放心大胆的在项目中用了。 官方文档:https://v3.cn.vuejs.org/api/sfc-script-setup.html#basic-syntax 相比于常规的composition api... -
JQuery实现(阻止事件冒泡,不触发父级标签点击事件)点击div里面的a的能触发点击事件,但是不触发外面的div的...
2016-01-13 15:48:33现在有一个div,这个div里面有一个a标签,div和a都是有点击事件的,但是我想要做到点击a标签的时候就只触发里面a标签的点击事件,不想执行外层div的点击事件。 使用JQuery可以简单地实现,只需要加入如下代码: ... -
jquery动态改变div背景色出现类似跑马灯效果
2018-03-14 17:09:38<!DOCTYPE html> <html> <head> ...script src=".../script&...script&.../** 定时器执行改变背景色代码*/ ...//页面加载完成后每隔1秒执行一次(循环 -
js动态添加的DIV中的onclick事件简单实例
2016-12-06 09:00:33最简单的是这样:<inputtype="button"onclick="alert(this.value)"value="我是button"/>...动态添加onclick事件:<inputtype="button"value="我是button"id="bu"> <scripttype="text/javascript"> ... -
点击一个按钮显示div,点击div之外的地方div隐藏,点击div之内的地方div不隐藏
2018-06-10 15:47:18<input id="btnClick" type="button" value="原生写法" class="...div id="pop" class="centerDiv radius" style="width: 260px; height: -
JavaScript实现点击div改变div的class名称
2019-12-16 22:59:44JavaScript实现点击div改变div的class名称 <!doctype html> <html> <head> <meta charset="utf-8"> <...script type="text/javascript"> function change(x){ ... -
怎么在<div>里调用js函数
2016-07-18 16:49:56我想把以上的天、时、分、秒单独放在下面的几个<div>里,让每个框显示对应的数据 ``` <div class="dash days_dash wow zoomIn" data-wow-delay="0.4s"> <div class="digit"> </script></div> ... -
html综述一 -- jQuery基础使用(动态在body中创建div节点)
2016-04-11 13:03:391 动态创建节点1-1 通过jsp最原生的方法来创建节点详细说明请查看点击此处查看<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-type"content="text/html;charset=utf-8"/> <... -
关于<script>元素(js两种引用方法:内部嵌入,外部引入)
2019-07-12 00:55:25三、<script>元素定义的6个属性。 一、在HTML中引用JavaScirpt脚本的方法有两种:内部嵌入和外部引用。 关于<script>标签的位置问题,虽然<script></script>可以放在... -
div onload()
2019-07-26 08:44:46本来想实现加载div的时候,使用onload()函数来加载函数,但是发现不起作用,查了资料,发现div和p都不支持,可以用jQuery的load()来实现它想实现的功能,例如: <div id='resultDIV' onload='funcX()'></... -
js实现三个div自动循环轮播 js自动切换显示div js自动轮播显示div
2019-11-22 19:07:32<!doctype html> <... <head> ...meta charset="utf-8">...js自动切换显示div</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script&... -
css+div动态图片切换
2017-12-18 15:07:261 css+div可以实现动态图片切换。通过修改className。 如:function aaa(){ document.getElementById("div1").className="a1"; document.getElementById("span1").className="a_1"; document.... -
Python-Selenium修改div元素的方法
2017-10-13 18:43:12背景: 在做UI自动化的时候,做好了登陆,但是进入到个人页,一直定位不到某个元素。...可以通过代码将这层div给点掉。方法2通过代码将这两层div的display属性改为none 我的代码如下:class OpenAccountLocators: -
script setup(基本用法)
2022-02-22 14:57:51script setup是 Vue3 的一个新语法糖,相比于普通的语法,简化了组合式API必须return的写法,拥有更好的运行时性能。 组件自动注册 <script lang="ts" setup> import assembly from '../components/Hello... -
我趟过javascript(js)文件不执行的坑
2019-04-30 11:01:55由于刚写h5没多久,很多基础知识不太扎实,导致入坑 html文件如下 <!DOCTYPE html> <html> <head> <title>秒杀详情页</title> </head> <body> <div class="container... -
前端 《优化改良》 - VUE高效开发 - div - 自定义div的load事件 - 戴向天
2019-06-11 16:59:28不说废话了,看代码 ,该说的都下在注释里面了↓↓ <template> <div :style="getStyle"> <slot/> </div> </template> <script> /** * 据之前的开发,由于每次的 ... -
Django循环创造div后,对各个div操作后触发事件,传递数据(Django第九篇)
2020-04-08 14:20:05现在,我希望在点击每个div里的发表按钮时,能在js里获取{{problem.pro_id}}以及{{problem.user_name}}这两个参数,然后进行传递,写入数据库等等操作 然而,根据一般的写法,按钮点击事件:(’#…’).onclick或者...