JavaScript 之 DOM [ 样式操做 ]
样式操做
描述
- JavaScript 能够经过 DOM 对 CSS 的样式进行操做
元素属性操做
-
Element对象能够对属性进行操做css
- getAttribute：表示获取指定元素的属性值
- setAttribute：表示对指定元素进行添加属性 - 先写属性名，在写属性值
- removeAttribute：表示对指定元素的指定属性进行删除
<body>
<div id="d1">
<p>手机</p>
<p id="p2">手表</p>
<p>电脑</p>
</div>
<script>
/*
Element对象也能够对属性进行操做
getAttribute：表示获取指定元素的属性值
setAttribute：表示对指定元素进行添加属性 - 先写属性名，在写属性值
removeAttribute：表示对指定元素的指定属性进行删除
*/
/* 先定位指定元素的位置 */
var p = document.getElementById( 'p2' );
console.log( p );
/* 获取指定元素的属性值 */
var ps = p.getAttribute( 'id' );
console.log( ps );
/* 对指定元素添加属性 - 再添加时，先写属性名在写属性值 */
p.setAttribute( 'title', '123' );
/* 对指定元素删除属性 */
p.removeAttribute( 'title' );
</script>
</body>
获取内联样式
经过节点方式获取指定目标的CSS样式
<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
/* 经过节点方式获取指定目标的CSS样式 */
/* 定位指定元素节点 */
var div = document.getElementById( 'd' );
/* 获取指定元素节点的属性节点 */
var shuxing = div.getAttributeNode( 'style' );
console.log( shuxing );// 显示 style="width: 200px; height: 200px; border: 1px solid black"
/* 获取指定属性节点的属性值 */
var style = shuxing.nodeValue;
console.log( style );// 显示 width: 200px; height: 200px; border: 1px solid black
</script>
</body>
经过元素方式获取指定目标的CSS样式
<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
/* 经过元素方式获取指定目标的CSS样式 */
/* 定位指定元素 */
var div = document.getElementById( 'd' );
/* 获取指定元素的属性 */
var style = div.getAttribute( 'style' );
console.log( style );// 显示 width: 200px; height: 200px; border: 1px solid black
</script>
</body>
经过HTMLElement对象获取指定目标的CSS样式
-
在DOM中HTMLElement对象提供了style属性html
- 该属性会返回一个对象 - CSSStyleDeclaration对象
- CSSStyleDeclaration对象封装了全部CSS的样式
<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
/*
在DOM中HTMLElement对象提供了style属性
* 该属性会返回一个对象 - CSSStyleDeclaration对象
* CSSStyleDeclaration对象封装了全部CSS的样式
*/
/* 定位指定元素 */
var div = document.getElementById( 'd' );
/* 获取指定元素的属性样式 */
var style = div.style;
console.log( style );// 显示 CSSStyleDeclaration{... ...}
/* 获取指定属性的属性值 */
console.log( style.width );// 显示 200px
</script>
</body>
获取外联样式
<head>
<meta charset="UTF-8">
<title>获取外联样式</title>
<style>
#p1 {
color: red;
}
</style>
</head>
<body>
<p id="p1">我特啊呦赌赢</p>
<script>
/* 能够先定位<style>标签的位置 */
var p1 = document.getElementsByTagName( 'style' )[0];
console.log( p1.textContent );
/*
Document对象提供了styleSheets属性
会获得StyleSheetList对象（StyleSheetList对象中包含了CSSStyleSheet对象）
*/
var p2 = document.styleSheets;
console.log( p2 );
/*
会获得CSSStyleSheet对象
该对象提供了全部的CSS样式（cssRules）
*/
var p3 = p2[0];
console.log( p3 );
/*
会获得CSSRuleList对象
该对像表示存储了当前外联样式的全部css样式（CSSStyleRule）
*/
var p4 = p3.cssRules;
console.log( p4 );
/*
CSSStyleRule对象：
cssText - 获得CSS样式内容以字符串形式表示
selectorText - 获得CSS样式的选择器
style - 获得CSSStyleDeclaration对象
*/
var p5 = p4[0];
console.log( p5 );
</script>
</body>
</html>
获取当前有效样式
- 获取当前有效样式要注意样式的优先级别
window.getComputedStyle()
- 能够获取指定元素的当前有效样式（有浏览器兼容问题）
currentStyle
- 能够做用在IE8版本的浏览器
<body>
<p id="p1" style="color: red">啊啊啊啊啊啊</p>
<script>
/*
获取当前有效样式 - 注意样式的优先级别
window.getComputedStyle()：能够获取指定元素的当前有效样式（有浏览器兼容问题）
currentStyle：能够做用在IE8版本的浏览器
*/
var p = document.getElementById( 'p1' );
/* 获取指定元素的当前有效样式 */
var p1 = window.getComputedStyle( p );
console.log( p1.color );
var p2 = p.currentStyle;
/* 解决兼容问题 */
if ( window.getComputedStyle ) {
var p1 = window.getComputedStyle( p );
console.log( p1.color );
} else {
var p2 = p.currentStyle;
console.log( p2.color );
}
</script>
</body>
设置内联样式
经过Element对象对属性进行设置
<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
/* 经过Element对象对属性进行设置 */
/* 定位指定元素 */
var div = document.getElementById( 'd' );
/* 经过setAttribute属性对指定元素的属性进行设置 */
div.setAttribute('style','width: 400px;height: 400px;border: 1px solid black');
</script>
</body>
经过HTMLElement对象对属性进行设置
<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
/* 经过HTMLElement对象对属性进行设置 */
/* 定位指定元素 */
var div = document.getElementById( 'd' );
/* 经过style属性对指定元素的属性进行设置 */
var style = div.style;
style.width = '600px';
</script>
</body>
class属性
Element对象class属性
- 能够用来获取指定元素的属性，也能够对指定元素进行设置
<head>
<meta charset="UTF-8">
<title>class属性的操做</title>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: lightcoral;
}
.d2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="d" class="d1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad, asperiores delectus deleniti dicta eligendi exercitationem, fuga ipsa ipsam minus neque nihil non officiis provident, quidem quis reprehenderit velit vitae.</div>
<script>
/* 定位指定元素 */
var div = document.getElementById( 'd' );
/* 经过Element对象提供的方法来对class属性进行设置 */
/* 获取指定元素的class属性 */
var attr = div.getAttribute('class');
console.log(attr);
/* 对class属性进行设置 */
div.setAttribute('class','d2');
</script>
</body>
className属性
<head>
<meta charset="UTF-8">
<title>class属性的操做</title>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: lightcoral;
}
.d2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="d" class="d1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad, asperiores delectus deleniti dicta eligendi exercitationem, fuga ipsa ipsam minus neque nihil non officiis provident, quidem quis reprehenderit velit vitae.</div>
<script>
/* 定位指定元素 */
var div = document.getElementById( 'd' );
/* 经过className来获取指定元素的class属性 */
var className = div.className;
console.log( className );// 显示 d1(class属性值)
/* 改变class的属性值 */
div.className = 'd2';
</script>
</body>
classList属性
<head>
<meta charset="UTF-8">
<title>class属性</title>
<style>
.p1 {
color: red;
}
.p2 {
background-color: silver;
}
.p3 {
color: green;
}
</style>
</head>
<body>
<p class="p1">我特啊呦赌赢</p>
<script>
/*
能够经过classList属性和如下方法来对指定元素的设置
add()：表示添加指定属性值
remove()：表示删除指定属性值
toggle()：表示切换指定的属性值
contains()：表示检测指定属性值是否存在 - 存在为true，不存在为false
*/
var ps = p.classList;
console.log( ps );
ps.add( 'p2' );
ps.remove( 'p1' );
ps.toggle( 'p3' );
ps.contains( 'p2' )
</script>
</body>
获取宽和高
- 能够分为：获取元素的宽和高、获取内容区的宽和高、获取滚动部分的宽和高
<head>
<meta charset="UTF-8">
<title>获取宽和高</title>
<style>
#d1 {
width: 100px;
height: 100px;
background-color: red;
padding: 50px;
margin: 50px;
border: 20px solid black;
overflow: auto;
}
#d2 {
width: 500px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
<script>
/*
获取元素的宽度和高度
元素的宽和高（内边距加内容区）：
宽度 clientWidth = css样式的宽度 + 内边距（两边） - 滚动条的宽度
高度 clientHeight = css样式的高度 + 内边距（两边） - 滚动条的高度
内容区的宽和高：
宽度 scrollWidth = 内容的宽度 + 内边距（单边）
高度 scrollHeight = 内容的高度 + 内边距（单边、设置内容溢出是两边）
滚动部分的宽和高 - 内容的宽高超出元素的宽高
宽度 scrollLeft = 内容的宽度 - 元素的宽度
高度 scrollTop = 内容的高度 - 元素的高度
*/
/* 定位指定元素的位置 */
var d = document.getElementById( 'd1' );
console.log( d );
/* 获取指定元素的宽和高 */
console.log( d.clientWidth, d.clientHeight );
/* 获取指定元素中内容区的宽和高 */
console.log( d.scrollWidth, d.scrollHeight );
/* 获取指定元素滚动条的滚动部分的宽和高 */
console.log( d.scrollLeft, d.scrollTop );
/* 经过鼠标事件来获取动态值 */
d.onscroll = function () {
console.log( d.scrollLeft, d.scrollTop );
}
</script>
</body>
相关文章
- 1. 【JavaScript】DOM之样式操做
- 2. JavaScript DOM 样式操做
- 3. Dom--样式操做
- 4. JavaScript的DOM操做表格及样式
- 5. javascript之DOM操做
- 6. JavaScript操做Dom
- 7. JavaScript Dom 操做
- 8. JavaScript操做DOM
- 9. JavaScript-DOM操做
- 10. JavaScript 之 DOM [ 表单操做 ]
- 更多相关文章...
- • Web 品质 - 样式表 - 网站品质教程
- • ASP.NET MVC - 样式和布局 - ASP.NET 教程
- • 委托模式
- • 互联网组织的未来：剖析GitHub员工的任性之源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章