js动态创建div，赋值className;在另一个js页面不起作用

最新推荐文章于 2024-05-27 21:16:16 发布

IT6680

最新推荐文章于 2024-05-27 21:16:16 发布

阅读量913

点赞数

CC 4.0 BY-SA版权

分类专栏：个人学习中记录遇到的错误

本文链接：https://blog.youkuaiyun.com/IT6680/article/details/102629949

个人学习中记录遇到的错误专栏收录该内容

6 篇文章

订阅专栏

本文探讨了在JavaScript中动态添加CSS及onclick事件的问题。当改变JS引用顺序导致功能失效时，作者采取了将CSS直接嵌入JS文件的临时解决方案，并详细介绍了如何使用JS动态为元素添加onclick事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引用js的顺序改了之后还是不起作用，css也不起作用。用笨方法解决：在当前js里面加CSS。

js动态添加onclick方法添加方式是：

var button = document.createElement("input")

button.setAttribute("type","button")

button.onclick=function(){【这里写点击的方法】}

一定要加function否则不报错也不起作用

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

IT6680

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JavaScript 创建DIV 设置样式不起作用，很多都是因为设置样式的顺序问题

fdsgdsgdfw的博客

04-09

452

世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**[外链图片转存中…(img-crs5onoF-1712675208740)]

利用js更改类名（className）来更改样式不起作用

Yss915的博客

07-08

3026

原因可能是更改的类名优先级不够可以在css中将相应类名前加上父类名来提升类名的优先级，例如 .xb li{ float: left; margin-right: 10px; border: 10px solid rgb(104, 102, 102); border-radius: 50%; } .xb .yes{ border-color: brown; } .xb .no{ border-color: rgb(104, 102, 102); } xb即为父类名

参与评论您还未登录，请先登录后发表或查看评论

vue通过js来设置div的最小高度所出现的赋值失败问题。

weixin_44220680的博客

07-03

3386

最近敲代码遇到一个小问题，如图：当页面内容不够多时，会出现底部栏上移的问题。一开始我想到的解决方式时，获取到屏幕的高度，并将它赋值为中间的div之中，这就能完美解决footer下移的问题了，说干就干。当时写出的代码是这样的： mounted(){ console.log('进行了高度赋值'); console.log($(document).height()/1.7); ...

JS动态添加样式类名

Adios_0403的博客

07-19

2484

/ 添加box类，但由于本身也有一个nav类，使用空格隔开可以一起添加，不会导致样式被删除。// 2 contains() 有就返回 ture，没有就返回 false。// 2. 切换类 toggle() 有还是没有有就删掉，没有就加上。// 2. 删除类 remove() 类名不加点，并且是字符串。// 2 追加类 add() 类名不加点，并且是字符串。// 通过 classList 添加。// 通过 classList 添加。// 通过 classList 添加。// 1. 获取元素。

关于在一个页面的div嵌套另一个页面导致下拉框失效的问题

浓眉大脸哥的博客

01-30

1482

做后台管理页面，在一个主页面中嵌套另一个页面，通过主页面点击不同菜单，在页面另一部分显示不同的子页面，知道有两种方法： 1.使用窗口; 2.在主页面的div里面嵌套一个子页面，$("#divId").load("XXX.jsp"). 在用第二个方法时，出现一个问题，当子页面加载成功后，会使得主页面的下拉菜单失效，一个解决方法是：主页面和子页面都包含了一次bootstrap.min.js文件，

javascript中动态生成div无效解决方法

大师的资源

04-14

4550

因为打印控件的需要用Javascript生成一些DIV层。我用下面代码： var div = document.createElement("div"); div.ID="right"; document.body.appendChild(div); document.getElementById("right").innerText = strContent; // 为什么这个不行？

div下js失效的问题

dylanwang_cn的博客

08-01

792

测试修改项目的时候js突然失效，方法能进去但是不会执行方法内的jQuery代码最开始是使用的,后来换成的，如下此代码运行一段时间没问题，后来在修改图片缩小放大的功能时，上面的代码就罢工了，两者没有什么关系，只是相邻的两个div，搜了很多方法没解决掉，后来换成下面的标签就可以了还有就是注意js的引用顺序，顺序

javascript生成div标签并设置class和style

jianchenn的博客

07-13

9549

整体代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box { border: 1px solid #f2f2f2; width: 100px; height: 100px; margin-left: 15px; margin-top: 15px;

css里的.className div {}

normallife的专栏

06-26

1483

css里的.className div {}的意思是：用了className的div及其子div都要按照这个className里定义的内容来显示。比如，css 文件里： .padZero div { top-paddeing:0px; } 它的意思就是用了padZero这个class css的div及其子div都应该遵守top-padding:0px; margi

通过类名修改样式 className操作Css，className获取，div.className = ‘box‘，div.className = ‘nav box‘

最新发布

weixin_54048131的博客

05-27

299

通过操作类名className操作css 1、 2、元素.className = 'active' 3、 4、div.className = 'box' 5、className可以通过className去代替 6、既有nav 又有box的写法 7、缺点是直接使用className赋值会覆盖以前的类名 8、

js添加class绑定事件无效的解决办法

Timor的博客

08-06

1702

当页面加载时，就会注册所有的事件，后面通过jquery新增的内容（< div class=“item”></ div>），再对新增的添加事件$(".item").click(function(){})；页面是不会执行的，解决方法，使用live(), live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）: $(".item").live("click",function(){ }); 由于jquery1.9后的版本已经把live()方法删

（14）问卷调查：两种方式className、div样式属性值改变、单选按钮性格测试

FixedStar 的博客

08-08

791

如题

HTML ＜div＞元素详细应用

wnw1234的博客

03-27

882

HTML <div> 元素是什么? 是块级元素，它是可用于组合其他 HTML 元素的容器。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。另一个常见的用途是文档布局,它取代了使用表格定义布局的老式方法。全局属性 1.class 属性规定元素的类名（classname）。 container类用于固定宽度并支持响应式布局的容器 container-fluid类用于100%宽度,占据全部视口(viewport)的容器 2.style 属性规

关于用append()插入代码后对应的js无效问题完美解决

fakergoing的博客

09-10

8355

1.下面的会有用到find，find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。 2. 产生这种问题的原因是：是因为append中的节点是在整个文档加载后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件没有生效。例子我们要把下面这段代码用append添加到div里面（这是要添加div里面的） &l...

【随笔记录】document.createElement创建添加属性

文学超的博客

07-15

2万+

动态添加div中，需要进行添加id，class，style等属性做下记录 var div = document.createElement('div'); div.id = 'mask_div1'; div.className = 'mask'; div.appendChild(document.createTextNode("test")); div.style.pos

react动态添加样式：style和className

热门推荐

suwyer的博客

08-07

13万+

react开发过程中，经常会需要动态向元素内添加样式style或className，那么应该如何动态添加呢？？？一、react向元素内，动态添加style 例如：有一个DIV元素，需要动态添加一个 display:block | none 样式，那么： <div style={{display: (index===this.state.currentIndex) ? "bloc...

【BUG】【CSS】【JS】JavaScript动态添加CSS的class类样式不生效，原因是css样式优先级在加载css文件的时候就确定下来的.

南方者的博客

02-17

4218

css的权重，多个class存在相同参数名不同参数值，优先级是根据css加载的class类名顺序的...

h5 怎么在js脚本中动态创建div元素

07-13

在JavaScript脚本中动态创建 `<div>` 元素可以使用 `createElement` 方法和 DOM 操作来实现。下面是一个示例代码，演示了如何在JavaScript中动态创建 `<div>` 元素： ```html <script> // 创建一个新的 <div> 元素 var div = document.createElement("div"); // 设置 <div> 元素的属性，比如 id、class、style 等 div.id = "myDiv"; div.className = "myClass"; div.style.width = "200px"; div.style.height = "100px"; // 设置 <div> 元素的内容，可以是文本或其他 HTML 元素 div.textContent = "Hello, World!"; // 将 <div> 元素添加到页面中的某个父元素内 var parentElement = document.getElementById("parentDiv"); parentElement.appendChild(div); </script> <div id="parentDiv">  </div> ``` 在上述代码中，我们首先使用 `document.createElement("div")` 创建了一个新的 `<div>` 元素，并将其赋值给变量 `div`。然后，我们可以使用 `div` 对象的属性来设置 `<div>` 元素的各种属性，比如 `id`、`class`、`style` 等。在示例中，我们设置了 `id` 和 `class` 属性，并使用 `style` 属性设置了宽度和高度。接下来，我们可以使用 `textContent` 属性来设置 `<div>` 元素的文本内容，也可以通过其他 DOM 操作来添加其他 HTML 元素作为其内容。最后，我们使用 `appendChild` 方法将 `<div>` 元素添加到页面中的某个父元素内。在示例中，我们通过 `getElementById` 方法获取了父元素，并将 `<div>` 添加为其子元素。这样，你就可以在 JavaScript 脚本中动态创建 `<div>` 元素，并将其添加到页面中的指定位置。你可以根据需要调整元素的属性和内容。