js动态变量给样式，js动态生成变量

如何用js动态设置class属性

如果给一个元素添加了多个class值，那么就相当于合并了它们的样式。 如果有不同的class设定了同一样式属性，则后者覆盖前者。

JavaScript允许你更改元素的class或id。当你更改之后，浏览器会自动更新元素的样式。是className，可不是class 注意：JavaScript使用的是className去访问class属性，因为class是一个保留关键字，因为将来JavaScript可能开始支持像Java一样的类。

首先在html中布局好两个按钮和一个div，如下图所示。接着编写添加class的方法，如下图所示，通过classList中的add。运行页面以后看到如下图所示的界面。点击添加class按钮就可以看到div中多了样式。接下来在编写移除class样式即可。

class 属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，如果改变了 class 属性的值，标签所引用的样式表也就更换了，所以这属于第一种修改方法。利用这种办法可以把标签的CSS样式表替换成另外一个，也可以让一个没有应用CSS样式的标签应用指定的样式。

最后需要先获取id为a的div的dom，使用insertBefore函数将div插入即可：打开浏览器，点击页面中的按钮，下方就显示出js的字样了：最后按下f12调出控制台，在控制台中可以看到插入的div结构，以此验证插入的内容是正确的。

注意：上面的代码不支持 IE 6/7，因为 IE 6/7 不支持 getElementsByClassName。

相关问答

Q1: JS创建的style样式怎么使用变量

我们使用var关键词来声明变量：var carname； 变量声明之后，该变量是空的(它没有值)。如需向变量赋值，请使用等号：carname=Volvo； 不过，您也可以在声明变量时对其赋值：var carname=Volvo； 例子：我们创建了名为carname的变量，并向其赋值Volvo，然后把它放入id=demo的HTML段落中。

声明时用var，且var关键字甚至可以省略，如：myScore = 96； //好的习惯是不要省略var关键字。变量的类型是可变的，如：myVar = 200； //myVar是整形。myVar = “Hello”； //myVar是字符串，字符串用一连串的字符放在双引号或单引号中表示。

js怎么在引号里面引用变量？var str=p style=\color： + num.toString(16) + \test/p 。由于变量让你能够把程序中准备使用的每一段数据都赋给一个简短、易于记忆的名字，因此它们十分有用。

步骤一：打开Eclipse，点击File--New--Dynamic Web Project，新建一个工程TestColor。

Q2: js怎样动态添加文字样式

1、如果给一个元素添加了多个class值，那么就相当于合并了它们的样式。 如果有不同的class设定了同一样式属性，则后者覆盖前者。

2、//添加 div var div = document.createElement(div)；//设置 div 属性，如 id div.setAttribute(id， newDiv)；div.innerHTML = js 动态添加div；parent.appendChild(div)；} 调用：addElementDiv(parent)；什么是DIV元素：DIV标签，称为区隔标记。

3、将 id=bg 这个 div 的 style（样式）中的 position（位置）设置为 relative（相对），然后在里面加一个 div 写文字，将它的 position 设置为 absolute（绝对），调整 top 和 left 来改变它的显示位置。

4、在页面内用JS操作CSS除非用AJAX，但操作页面内的样式的话，是可以的。

Q3: 如何通过js给div的style动态赋值

代码大致如下供参考：var image=new Image()；image.src=//你的背景图片的src；var divelement = document.getElementById(你的div的id)；divelement.style.height=(image.height*divelement.offsetWidth)/image.width + px；几个需要注意的地方是image.src=xxx后需要等待直到图片下载完成。

/div 因为是动态数据，所以#div1的高度是auto，无法获取到具体值。var div1=document.getElementById(div1)；alert(divstyle.height)；//没有值 建议从css上改进。比如给中间的div设置css {height：500px；overflow：auto；}这样就能固定高度，多出的内容用滚动条显示。

修改div高度，可以直接给div的width赋值即可。

使用JavaScript给html中的一个div的属性赋值可以使用jquery的attr()方法来实现。jquery的attr()方法允许两个参数，如果值给一个参数则返回的是元素的属性的值，两个参数可以设置一个元素属性的值为第二个参数。

在test.html文件内，设置div标签的id为mytest，主要用于下面通过该id获得div对象。在test.html文件内，使用button标签创建一个按钮，按钮名称为“删除div里的内容”。在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行delcon（）函数。

Q4: JS获取CSS动态ID并增加一个style

1、通过cssText的方式进行拼接。通过设置class，累加设置class的方式进行。

2、在test.html文件中，使用button标签创建一个按钮，按钮名称为“获取id值”。在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行getid（）函数。

3、Javascript获取页面的元素的样式常见的两个方法是 document.getElementById()， document.querySelector()；方法。2 在下面的实例中是使用Javascript来改变标签的背景颜色，使用的是document.querySelector()方法。

4、html编辑器、浏览器。首先，打开html编辑器，新建html文件，例如：index.html。在index.html中的script标签，输入js代码：$(head).append(stylediv{font-size： 32px；}/style)；。浏览器运行index.html页面，此时发现js成功将css代码添加到head标签的style标签中。

Q5: Js动态创建的元素,如何设置他们的样式?我知道委托可以绑定事件,但是...

1、即是从上级节点传递到下级节点 事件委托原理事件委托就是基于js的事件流产生的，事件委托是利用事件冒泡，将事件加在父元素或者祖先元素上，触发该事件。

2、如果给一个元素添加了多个class值，那么就相当于合并了它们的样式。 如果有不同的class设定了同一样式属性，则后者覆盖前者。

3、目标元素.parentNode.childNode 然后再通过循环给每个元素更改样式即可。当然这里面也包括了目标元素，要不要排除掉就看你了 也可以直接找目标元素的兄弟元素，但这要分两步走：往前找和往后找，除非目标元素是所有兄弟里面的老大或老幺，倒不如通过老爸直接找到所有兄弟来得更快更方便。

4、首先创建html结构，如下图所示，一个input元素，一个按钮，一个空的ul列表。然后添加按钮点击事件，如下图所示，在按钮点击事件中获得input元素。通过value属性我们可以获得用户在input中输入的内容，如下图所示。

js动态变量给样式的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js动态生成变量、js动态变量给样式的信息别忘了在本站进行查找喔。