这篇文章给大家分享的是有关javascript如何设置css的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
马龙ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!
JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,JavaScript是被广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。
javascript设置css的方法:1、通过内联样式直接设置style对象;2、通过添加全局样式设置style属性;3、使用JavaScript添加和删除类“add()”和“remove()”设置css。
本文操作环境:windows7系统、javascript1.8.5&&HTML5&&CSS3版、Dell G3电脑。
javascript设置css样式
1、直接设置style对象(内联样式)
使用JavaScript设置元素样式的最简单方法是使用style属性。在我们通过JavaScript访问的每个HTML元素时都有一个 style对象。此对象允许我们指定CSS属性并设置其值。例如,这是设置id 值为demo的HTML元素的字体颜色、背景颜色、的样式:
var myElement = document.querySelector("#demo"); // 把颜色设置成紫色 elem.style.color = 'purple'; // 将背景颜色设置为浅灰色 elem.style.backgroundColor = '#e5e5e5'; // 将高度设置为150 px elem.style.height = '150px';
注:JavaScript使用驼峰原则(例:backgroundColor)而不是短划线(background-color)表示属性名称
该style属性在元素上添加样式内联:
Hello, world!
但是,这可能会使我们的标记变得非常混乱。浏览器渲染的性能也较差。
2、设置style属性--添加全局样式
另一种方法是将里带有CSS属性的元素注入DOM。将在设置应用于一组元素而不仅仅是一个元素的样式时,这非常有用。
首先,我们将创建一个样式元素。
var style = document.createElement('style');
接下来,我们将通过innerHTML来给