元素的样式设置六种方法

1、对象.style
2、对象.className
3、对象.setAttribute(“style”)
4、对象.setAttribute(“class”)
5、对象.style.setProperty(“CSS属性”, “CSS属性值”)
6、对象.style.cssText

<style>.pink {background-color: pink;}</style>

<body><div id="box">盒子</div><button id="change">变色</button></body>

在js文件中获取元素

当点击按钮时给div盒子添加背景颜色

var box = document.getElementById("box");
document.getElementById('change').addEventListener('click',function(){}

设置的六种方法操作

在事件的处理程序中（函数内）书写

//1、对象.stylebox.style.backgroundColor = 'pink'

// 2、对象.classNamebox.className = 'pink'

// 3、对象.setAttribute("style")
box.setAttribute('style','background-color:pink')

// 4、对象.setAttribute("class")box.setAttribute('class','pink')

 //5、对象.style.setProperty("CSS属性", "CSS属性值")box.style.setProperty('background-color','pink')

// 6、对象.style.cssTextbox.style.cssText = 'background-color:pink'

js中元素样式设置的六种方法相关推荐

验证用户输入的是不是中文名字淘宝精品案例元素样式设置的方式链式编程
验证用户输入的是不是中文名字 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
html中元素居中的五种方法
在网页开发中,经常会有嵌套元素中将子元素居中的要求.下边将五种常用的居中方法进行总结. 1:原始图(父子元素无border,无padding): 2:实现居中效果: 一:使用margin进行固定长度的 ...
js中style.display=无效的解决方法
本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...
JS行间改变css的方法,js改变css样式的三种方法推荐
共用代码: this is a div var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:25 ...
前端：JS实现数组去重常用的六种方法介绍
今天给大家分享JS实现数组去重常用的六种方法,希望对大家能有所帮助! 定义变量 let arr = [20,6,13,20,100,8,13,11]; let newArr = []; 1.两层循环去 ...
js中string字符串转换为JSON对象 - 方法大全（4种）
js中string字符串转换为JSON对象 - 方法大全(4种) jQuery插件支持的转换方式: 示例: //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对 ...
iphone iPhone开发中为UINavigationBar设置背景图片方法
1:原文摘自:http://mobile.51cto.com/iphone-284865.htm iPhone开发中为UINavigationBar设置背景图片方法是本文要介绍的内容,在iPhone开 ...
axure中交互样式设置鼠标悬停后其他的按下选中无效_Axure交互动作
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 axure中交互样式设置鼠标悬停后其他的按下选中无效_交互区域 -- 交互动作启用情形+交互事件+交互动作三个部分构成了整个原型的交互逻辑.启用情形是 ...
js获取元素样式-行内样式、内部样式、外部样式
js获取元素样式一.行内样式具体实现二.获取所有样式具体实现一.行内样式具体实现在js获取到dom元素之后,使用其style属性即可获取到其所有的行内样式 <div id=&quo ...

js中元素样式设置的六种方法

元素的样式设置六种方法

在js文件中获取元素

设置的六种方法操作

js中元素样式设置的六种方法相关推荐

最新文章

热门文章