JavaScript的样式操作

样式操作
- 获取内联样式
- - getAttribute()方法
  - DOM对象的style属性
  - CSSStyleDeclaration对象
- 获取外联样式表
- - Document对象的styleSheets属性
- 获取class属性
- 获取当前有效样式
- - getComputedStyle()方法
- 设置内联样式
- 设置class属性
- Element对象的样式属性
- - 元素内部的宽度和高度
  - 内容区的宽度和高度
  - 滚动条滚动的宽度和高度
  - 判断元素内容是否滚动到底
  - 元素内部的宽度和高度
  - 获取指定元素的定位父元素

你好！这是我自己编辑的一些知识点。如果你想学习JavaScript的有关知识, 可以仔细阅读这篇文章，了解一下关于JavaScript的基本语法知识。

样式操作

获取内联样式

getAttribute()方法

Element对象的getAttribute()方法的语法结构如下：

var value=element.getAttribute('style');

调用getAttribute()方法的element表示HTML页面元素。
传递的参数style表示属性名称。
返回值则是指定属性名对应的值（内联样式的声明内容）。

<p id='p1' style='color:lightcoral;font-weight:bolder'>这是一个段落内容</p>
<script>var pElem=document.getElementById('p1');var style=pElem.getAttribute('style');console.log(style);
</script>

DOM对象的style属性

由于DOM规范标准中将Document对象定位的HTML页面元素解析为相应的对象，而这些对象都继承于HTMLElement对象。该对象提供了style属性，返回CSSStyleDeclaration对象。

这是一个段落内容

CSSStyleDeclaration对象

通过element.style返回的是CSSStyleDeclaration对象。CSSStyleDeclaration对象表示一个CSS属性键值对的集合。

属性或方法	描述
cssText	声明块的文本内容
length	属性的数量
item()	返回属性名。例如：nameString=styleObj.item(0) Alternative;nameString=styleObj[0]
getPropertyValue()	返回属性值。例如：valString=styleObj.getPropertyValue(‘color’)

cssText属性

通过element.style.css.Text属性获取CSS声明块的文本内容。

这是一个段落内容

注意：cssText属性返回的是CSS声明块的文本内容，解析操作时会比较麻烦。

例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><divid="d1"style="width: 200px; height: 200px; border: 1px solid grey"></div><script>//style属性是指定元素的属性 -> 通过属性操作完成//1.节点方式var div = document.getElementById("d1");var attrNode = div.getAttributeNode("style");var style = attrNode.nodeValue;console.log(style);//2.元素方式var div = document.getElementById("d1");var style= div.getAttribute("style");console.log(style);/*DOM中HTMLElement对象提供了style属性*返回CSSStyleDeclaration对象*DOM对于CSS中所有样式属性提供的对象（封装了所有样式属性）*得到样式属性对应的值 -> 字符串类型（将其转换为Number类型）*/var div=document.getElementById('d1');var style=div.style;console.log(style.width);</script></body>
</html>

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><divid="d1"style="width: 200px; height: 200px; border: 1px solid grey"></div><script>var div=document.getElementById('d1');//得到的是CSSStyleDeclaration对象var style=div.style;//cssText属性 - 获取当前元素中所有的样式属性内容（字符串类型）console.log(style.cssText);//length属性 - 获取当前元素中样式属性的个数（不一定与设置的个数一致）console.log(style.length);//item(index)方法 - 获取当前元素中指定位置的样式属性var attrName=style.item(0);console.log(style.item(0));//getPropertyValue(name)方法 - 获取当前元素中指定属性名对应的样式属性名console.log(style.getPropertyValue(attrName));//遍历对象for (var attr in style){console.log(attr);}</script>
</body>
</html>

获取外联样式表

Document对象的styleSheets属性

Document对象提供了styleSheets属性,该属性返回包含所有外联样式表（内嵌样式表和外联样式表）的集合对象。

var styleSheetList=document.styleSheets;

作为返回值的styleSheetList是一个由styleSheet对象组成的列表，每个styleSheet对象表示HTML页面中内嵌样式表或外联样式表。

console.log(document.styleSheets);

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css"><style>.d2{width: 200px;height: 200px;background-color: grey;}</style>
</head>
<body><div class="d1"></div><div class="d2"></div><script>//内嵌样式表 -> 获取<style>元素// var styleElement=document.getElementsByTagName('style')[0];// var style=styleElement.textContent;// console.log(style);/*Document对象提供了styleSheets属性* 作用 - 获取当前HTML页面中所有的样式表* 返回 - StyleSheetsList对象（类数组对象）*/var stylesheetList=document.styleSheets;console.log(document.styleSheets);/*CSSStyleSheet对象*作用 - 表示某个指定的样式表*属性*type属性 - 表示当前使用的是CSS样式*href属性 - 表示当前样式表的路径*cssRules/rules属性 - 当前样式表中所有的样式规则*/var styleSheet=stylesheetList[0];console.log(styleSheet);/*CSSRulesList对象*作用 - 表示当前样式表中的所有规则集合（类数组对象）*/var cssRulesList=styleSheet.rules;console.log(cssRulesList);/*CSSStyleRule对象*作用 - 表示当前样式表中指定的样式规则*属性*cssText属性 - 表示当前样式规则的字符串内容*style属性 - 表示当前样式规则（CSSStyleDeckaration对象）*/var cssStyleRule=cssRulesList[0];console.log(cssStyleRule);var cssStyleRule=cssRulesList[0];console.log(cssStyleRule);var styleDecl=cssStyleRule.style;console.log(styleDecl.width);/*DOM中提供有关外联样式的获取与设置*操作性比较复杂*操作时容易出错实际情况：1.页面整体样式风格改变 -> 通过<link>元素的href属性的值的修改（修改引入的CSS文件）2.页面局部样式风格改变 -> 内联样式的优先级别高于外联样式的特点（通过内联样式覆盖外联样式）*/</script>
</body>
</html>

获取class属性

获取当前有效样式

getComputedStyle()方法

window对象中提供了getComputedStyle()方法，用于获取指定元素的当前有效样式，得到CSSStyleDeclaration对象。

var style=window.getComputedStyle(element,[pseudoElt]);

element参数表示获取有效样式的指定元素。
pseudoElt参数是个可选项，指定一个要匹配的伪元素的字符串。

注意：pseudoElt参数必须对普通元素省略（或null）。

getComputedStyle()方法的返回值是CSSStyleDeclaration对象，表示指定元素的有效样式。

var btn=document.getElementById('btn');
var style=window.getComputedStyle(btn,null);
console.log(style.backgroundColor);

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#d1{color: ivory;font-family: '宋体';}</style>
</head>
<body><div id="d1" style="width: 200px;height: 200px;background-color: indianred;">瓦伦西亚</div><script>/*Window对象的getComputedStyle(element)方法*作用 - 获取指定元素的当前有效样式内容*参数*element - 指定的元素*返回值 - CSSStyleDeclaration对象*注意 - 该方法仅用于获取，不能用于设置*/var div=document.getElementById('d1');var style=window.getComputedStyle(div);console.log(style);// getComputedStyle(element)方法具有浏览器兼容问题// *IE8以下不支持var style=div.currentStyle;console.log(style);function getStyle(element){if(element.getComputedStyle){return window.getComputedStyle(element);}else{return element.currentStyle;}}</script>
</body>
</html>

设置内联样式

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><divid="d1"style="width: 200px; height: 200px; border: 1px solid grey"></div><script>//利用属性操作的方式var div=document.getElementById('d1');div.setAttribute('style','width:300px;height:300px;border:1px solid black;');//利用HTMLElement对象的style属性var div=document.getElementById('d1');var style=div.style;style.width='500px';style.height='500px';//DOM不允许重写DOM中的对象// style={//     height:'500px',//     width:'500px'// }</script>
</body>
</html>

设置class属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.d1{width: 200px;height: 200px;background-color: grey;}.d2{font-family: '楷体';color: lightcoral;}.one{width: 100px;height: 100px;background-color: rgb(152, 143, 66);}</style>
</head>
<body><div class="d1 d2" id="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed similique possimus cumque explicabo sint soluta debitis corporis dignissimos aut doloribus, adipisci iure consequatur nam nobis aspernatur eum tempore nemo culpa.</div><script>var div=document.getElementById('d1');//DOM中某个对象提供了className属性 -> 得到class属性的值var className=div.className;console.log(className);// div.className='one';var attr=div.getAttribute('class');console.log(attr);// div.setAttribute('class','one');//classList属性（浏览器兼容问题) - 获取多个类选择器叠加的用法var classList=div.classList;console.log(classList);</script>
</body>
</html>

Element对象的样式属性

元素内部的宽度和高度

Element对象的clientWidth和clientHeight属性表示元素内部的宽度和高度，单位为像素。这些属性的值包含内边距，但不包含滚动条、边框和外边距。

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#d1{width: 200px;height: 200px;border: 10px solid black;padding: 50px;box-sizing: border-box;}</style>
</head>
<body><div id="d1"></div><script>var div=document.getElementById('d1');//只能获取，不能设置-> 内容区+内边距console.log(div.clientWidth,div.clientHeight);</script>
</body>
</html>

内容区的宽度和高度

Element对象的scrollWidth属性表示元素内容的宽度，单位为像素。scrollWidth属性返回元素内容区的宽度和元素本身宽度中更大的那个值。

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent{width: 200px;height: 200px;border: 10px solid black;overflow: auto;}#children{width: 400px;height: 400px;background-color: blueviolet;}</style>
</head>
<body><div id="parent"><div id="children"></div></div><script>var parent=document.getElementById('parent');console.log(parent.scrollWidth,parent.scrollHeight);</script>
</body>
</html>

滚动条滚动的宽度和高度

Element对象的scrollLeft属性表示滚动条到元素左边的距离，单位为像素。scrollLeft属性的默认值为0.

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent{width: 200px;height: 200px;border: 10px solid black;overflow: auto;}#children{width: 400px;height: 400px;background-color: blueviolet;}</style>
</head>
<body><div id="parent"><div id="children"></div></div><script>var parent=document.getElementById('parent');/*滚动条滚动事件*onwheel事件*onmousewheel事件*oncroll事件*/parent.onscroll=function(){console.log(parent.scrollLeft,parent.scrollTop);}</script>
</body>
</html>

判断元素内容是否滚动到底

如果元素内容滚动到底的话，如下等式返回的结果为true，否则返回为false。

element.scrollHeight-element.scrollTop===element.clientHeight

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent{width: 400px;height: 600px;border: 10px solid black;overflow: auto;}#child{width: 370px;height: 1000px;background-color: coral;}</style>
</head>
<body><div id="parent"><div id="child">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed vel reiciendis minus tenetur fuga sapiente cumque voluptas veniam similique dolor error laborum autem eius, maxime quo? Eos rem fugit totam.</div></div><script>var parent=document.getElementById('parent');parent.onscroll=function(){// 用于判断滚动条是否滚动到底部// parent.clientHeight + parent.scrollTop===parent.scrollHeightconsole.log(parent.clientHeight,parent.scrollHeight,parent.scrollTop)}</script>
</body>
</html>

元素内部的宽度和高度

Element对象的clientWidth和clientHeight属性表示元素内部的宽度和高度，单位为像素。这些属性的值包含内边距，但不包含滚动条、边框和外边距。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TEwqS4Oj-1636450629092)(https://z3.ax1x.com/2021/09/26/46ffqf.png)]

例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {padding: 0;margin: 0;height: 1200px;}img {width: 300px;position: absolute;left: 400px;top: 300px;}</style>
</head><body><img src="psc.jpg" alt=""><script>//  DOM中表示为当前HTML页面//  *document对象 - 有效//  *<html>元素//  *<body>元素 - 有效var html = document.documentElement;var body = document.body;var img = document.getElementsByTagName('img')[0];var style = window.getComputedStyle(img);var imgTop = parseInt(style.top);body.onscroll = function() {// console.log(html.scrollTop, imgTop);if (html.scrollTop >= imgTop) {img.style.position = 'fixed';img.style.top = 0;} else {// img.style.position = 'absolute';// img.style.top = 0;img.removeAttribute('style');}}</script>
</body></html>

获取指定元素的定位父元素

Element对象提供的offsetParent属性用于返回一个指向最近的包含该元素的定位元素。

var parentObj=element.offsetParent;

作为返回值的parentObj表示一个指向最近的包含该元素的定位元素。

注意：如果该祖先元素中没有开始定位，则offsetParent为body元素。

<style>#parent{position:relative;}
</style>
<script>var btn=document.getElementById('btn');console.log(btn.offsetParent);
</script>

例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent {position: relative;}#child {position: relative;}#d1 {width: 100px;height: 100px;background-color: beige;}</style>
</head><body><div id="parent"><div id="child"><div id="d1"></div></div></div><script>var d1 = document.getElementById('d1');// 1.如果当前元素的所有祖先元素都没有开启定位的话 - <body>元素// 2.如果当前元素的所有祖先元素中，只能一个开启定位的话 - 开启定位的祖先元素// 3.如果当前元素的所有祖先元素中，具有多个开启定位的话 - 距离当前元素最近的那个祖先元素console.log(d1.offsetParent);</script>
</body></html>

JavaScript的样式操作相关推荐

【JavaScript】DOM 操作元素样式和元素类名
文章目录 [JavaScript]DOM 操作元素样式和元素类名一. 操作元素样式 (1)操作行内元素 1. 获取元素的样式 2. 设置元素的样式 (2) 操作非行内元素和行内元素 1. 获取元素的 ...
第一百一十六节，JavaScript，DOM操作样式
JavaScript,DOM操作样式一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
(JavaScript学习记录)：jQuery 样式操作
写在前面:参考哔哩哔哩黑马程序员pink老师教程地址:https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4 目录 jQuery 样式操作 ...
php 命令执行crud_如何使用原始JavaScript执行CRUD操作
php 命令执行crud by Zafar Saleem 通过Zafar Saleem 如何使用原始JavaScript执行CRUD操作 (How to perform CRUD operations ...
DOM操作之属性和样式操作
在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法. 在开始操作前,我们需要先在html中添加如下代码,后面所 ...
jQuery（三）：样式操作
一.DOM操作分类 DOM Core:任何一种支持DOM的编程语言都可以使用它,例如:getElementById(). HTML-DOM:用于处理HTML文档,例如:document.forms. ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
vue选中点击的元素_vue中v-for循环选中点击的元素并对该元素添加样式操作
相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变, ...
jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件
jQuery事件: jQuery中的事件和javascript中的事件基本相似,不同的是jQuery中的事件处理函数写在事件后面的括号中,如: <script>$('input').cli ...

JavaScript的样式操作

JavaScript的样式操作

样式操作

获取内联样式

getAttribute()方法

DOM对象的style属性

CSSStyleDeclaration对象

获取外联样式表

Document对象的styleSheets属性

获取class属性

获取当前有效样式

getComputedStyle()方法

设置内联样式

设置class属性

Element对象的样式属性

元素内部的宽度和高度

内容区的宽度和高度

滚动条滚动的宽度和高度

判断元素内容是否滚动到底

元素内部的宽度和高度

获取指定元素的定位父元素

JavaScript的样式操作相关推荐

最新文章

热门文章