js里设置html样式,JS 动态设置css样式

1.0 内联样式 : 通过行内样式.style 属性来编辑给定的HTMLElement的内联样式

let el = document.createElement('div') ;

01) . el.style.backgroundColor = "black' ;

02) . el.style.cssText = "background-color:red,border:1px solid green;" ; //该种方法用于设置多个复杂样式

03) . el.setAttribute('style','background-color:black')

04) . Object.assgin(el.style{ //->该种方法用于设置内联样式过于繁琐的dom样式

backgroundColor : 'red',

fontSize : 10+'px'

})

image.png

CSSStyleDeclaration 接口中方法 :

*注意：接口中方法只针对于元素的行内样式生效在css 中写的样式不生效 *；

Object.getPropertyValue(propertyname) :propertyname参数: 是一个字符串, 表示要检测的属性名; 返回值是属性对应的属性值 ;

Object.getPropertyPriority(propertyname) : 返回值是！important;

Object.removeProperty(propertyname) : propertyName :一个字符串，表示要移除的属性名。返回值是字符串移除的属性名

// 要移除的属性名之前

style.removeProperty('height')

image.png

//移除之后

style.removeProperty('height')

image.png

完整代码部分展示

image.png

2 . css 类

className

-1.el.className = '' ''

image.png

-2.el.setAttribute(“class”,“ 属性值”)

image.png

添加多个属性值： el.setAttribute(“class”，“属性值1 属性值2 ……” )

classList

image.png

classList 中的方法如下：

eg ： element.classList.add()

image.png

js里设置html样式,JS 动态设置css样式相关推荐

微信小程序wxss---对应css样式（动态修改css样式）
微信中wxss有些类似于scss,可以引用外联样式.但是不知道怎么继承css样式下图是微信中动态绑定css样式,实现css样式的动态修改
如何通过js改变css样式,如何通过JS 动态改变CSS样式
如何通过JS 动态改变CSS样式0 豆豆dou...2013.09.15浏览640次分享举报 .TLIWREGION3CSS { position:absolute; left:32px; top:4 ...
《微信小程序案例2》如何动态给css样式增加或删除class类
微信小程序是不能像一般浏览器开发使用js一样获取dom节点信息并修改css样式的.这里需要结合数据绑定,数据中的data中选择状态的设置一个true变量,未选中的设置一个false变量接着在wxml ...
asp.net 动态修改css样式,ASP.NET中直接用C# 动态修改CSS样式
ASP.NET中直接用C#动态修改CSS样式 wonsoft(wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个Butt ...
css vue 选项卡_vuejs实现标签选项卡动态更改css样式的方法
html {{item.name}} js var app = new Vue({ el:"#app", router, data:{ m:"hello vue.js&q ...
jquery怎么动态修改css样式
jquery动态修改css样式的方法:1.通过css方法动态修改css样式:2.给指定的html元素定一个CSS样式:3.查看元素的css样式:4.隐藏与显示p或指定的其他html元素. jquery ...
javascript 动态修改css样式
方法一:改变外联css文件,这里不讲这个. 方法二:通过改变claaName来改变样式,语法: obj.className = "style2";//或者 obj.setAttri ...
javascript、jquery 动态修改css样式方法
javascript.jquery 动态修改css样式方法 javascript 修改样式的方法第一种.使用obj.className来修改样式表的类名 var obj = document.get ...
怎么在jq中添加html样式,jquery怎么添加css样式
jquery添加css样式的方法:1.使用addClass()方法添加css样式,语法如"$(selector).addClass(class)":2.使用css()方法设置css ...
css样式让样式失效,如何让css样式失效
让css样式失效的方法:1.通过更改元素名称,来达到让此区域css失效的目的:2.通过设置优先级高的css样式来覆盖此css样式使其失效. 本教程操作环境:windows7系统.css3版,DELL ...

js里设置html样式,JS 动态设置css样式

js里设置html样式,JS 动态设置css样式相关推荐

最新文章

热门文章