精华内容
下载资源
问答
我要提问
  • 动态div里script不执行
    千次阅读
    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的语法，然后居然没执行，就遇到了这个问题。

    人生往往如此，碰到了，分别了，再也不见了。没有那些让人觉得哪怕物是人非，也有故事留心头 ——《剑来》

    收起
    展开全文
    javascript html

  • 通过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>
    收起
    展开全文
    javascript html innerHTML ajax

  • 关于script在页面的最佳位置以及html执行顺序

     千次阅读 2018-09-17 16:26:56
    脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。 　所以，大部分网上讨论是将script脚本放在&lt;body&gt;之后，那样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之后”

     

    参考自：http://www.cnblogs.com/iamwangxupeng/p/4950255.html

    收起
    展开全文
    script位置

  • 如何在点击一个<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=...
    收起
    div javascript

  • js动态创建div

     千次阅读 2017-03-20 19:06:32
    js动态创建div1.创建某个标签：如下在body中创建一个div的事例； <script> function fun(){ var frameDiv = document.createElement("div");//创建一个标签 var bodyFa = document.getElementById("bodyid");//通过...
    收起

  • div拖拽实现延伸

     万次阅读 2018-07-12 15:00:37
    div拖拽 原理： 鼠标事件 mousedown mousemove mouseup 注意事项: 被拖动的div的position属性值一定是absolute。 onmousedown事件需要在window.onload时加载。 如果被拖动的div上有文字会有自带的文字...
    收起
    div拖拽 立即执行函数 前端开发

  • vue+element项目里实时监听某个div宽度的变化，然后执行相应的事件

     万次阅读 多人点赞 2019-04-12 17:40:56
    背景：vue项目中用到echarts图表，页面上有侧边栏，侧边栏收缩图表不能自适应，想通过监听内容部分的宽度让图表resize，试过window带的resize，只能监听浏览器窗口大小变化，为了监听某元素区域的变化而使echarts的...
    收起
    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"; ...
    收起
    jsp javascript div

  • div左/右键点击执行事件

     千次阅读 2018-01-16 13:53:59
    ////点击子级div时，不想执行上面方法，可解绑自定义的点击事件 //$(".left-right-click").unbind("mousedown").bind("contextmenu", function (e) {   // e.preventDefault();   // return false; ...
    收起
    div点击事件

  • innerHTML中script脚本不执行的问题

     千次阅读 2014-02-10 15:53:38
    有一个div1，我希望向后台发送请求，然后这个请求会返回一个html页面代码，我希望把返回内容填充到div1里，但是html里所包含的script将不会执行。有一个好的办法就是不要用innerHTML，而是用jquery的load方法
    收起
    innerHTML script jquery load

  • JS中div的动态添加

     千次阅读 2018-10-12 01:48:08
    //添加一个500*500的div快 &lt;div id="aa" style="width:500px;height:500px;background-color:#999;"&gt; &lt;/div&gt; //添加一个500*500的表格 &lt;div id=&...
    收起

  • 如何强制子div为父div的高度的100％而不指定父级的高度？

     千次阅读 2020-01-18 10:58:48
    我有一个具有以下结构的网站： <div id="header"></div> <div id="main"> <div id="navigatio
    收起
    html css

  • script setup 语法使用

     万次阅读 2021-08-18 14:57:25
    vue3.2正式版已经发布，script setup语法已经由实验性质改为了正式语法，可以放心大胆的在项目中用了。 官方文档：https://v3.cn.vuejs.org/api/sfc-script-setup.html#basic-syntax 相比于常规的composition api...
    收起
    vue vue3

  • JQuery实现(阻止事件冒泡,不触发父级标签点击事件)点击div里面的a的能触发点击事件，但是不触发外面的div的...

     万次阅读 2016-01-13 15:48:33
    现在有一个div，这个div里面有一个a标签，div和a都是有点击事件的，但是我想要做到点击a标签的时候就只触发里面a标签的点击事件，不想执行外层div的点击事件。 使用JQuery可以简单地实现，只需要加入如下代码： ...
    收起
    js阻止冒泡 div JQuery

  • jquery动态改变div背景色出现类似跑马灯效果

     千次阅读 2018-03-14 17:09:38
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...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
    &lt;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:44
    JavaScript实现点击div改变div的class名称 <!doctype html> <html> <head> <meta charset="utf-8"> <...script type="text/javascript"> function change(x){ ...
    收起
    javascript css html

  • 怎么在<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:39
    1 动态创建节点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>可以放在...
    收起
    JavaScript 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:26
    1 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:
    收起
    python

  • script setup(基本用法)

     千次阅读 2022-02-22 14:57:51
    script setup是 Vue3 的一个新语法糖，相比于普通的语法，简化了组合式API必须return的写法，拥有更好的运行时性能。 组件自动注册 <script lang="ts" setup> import assembly from '../components/Hello...
    收起
    vue.js javascript

  • 我趟过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> /** * 据之前的开发，由于每次的 ...
    收起
    div vue

  • Django循环创造div后，对各个div操作后触发事件，传递数据（Django第九篇）

     千次阅读 2020-04-08 14:20:05
    现在，我希望在点击每个div里的发表按钮时，能在js里获取{{problem.pro_id}}以及{{problem.user_name}}这两个参数，然后进行传递，写入数据库等等操作 然而，根据一般的写法，按钮点击事件：（’#…’）.onclick或者...
    收起
    html django python

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 204,110
精华内容 81,644
热门标签
关键字：

动态div里script不执行