JavaScript获取元素的样式

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： JS

作者：黎耀杰

撰写时间：2022/3/28

1、通过style属性获取/修改样式

元素.style.样式名=样式值读取方式：元素.style.样式名

通过style属性设置和读取的都是内联样式

案例：

HTML

CSS

JS获取元素内联样式属性

JS修改元素的样式：元素.style.样式名=样式值

读取方式：元素.style.样式名

通过style属性设置和读取的都是内联样式

获取元素的当前显示样式

语法：元素.currentStyle.属性名或元素.currentStyle[属性名],currentStyle可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值。例如：如果没有设置width，获取到的值为auto

在其他浏览器中可以使用

getComputedStyle()这个方法获取当前元素的显示样式，这个方法是window的方法，可以直接使用

参数说明：

1.需要获取样式的元素

2.可以传递一个伪元素，一般都传null

说明：该方法返回一个对象，对象中封装了当前元素对应的样式

var obj=getComputedStyle(element,null);//该方法的使用说明获取元素显示样式：obj.属性名或则 obj["属性名"]，如果获取的样式没有设置，则会获取到真实的值，而不是默认值。例如：如果没有设置width，获取到的值为1200px(元素实际的值)。

注意：！！！该方法不支持IE8及以下的浏览器

定义一个函数，用来获取指定元素的当前样式

参数：

element 要获取样式元素
nane 需要获取的样式名

getComputedStyle()方法与currentStyle属性都是只读的属性，不能修改属性，如果需要修改属性的值，只能使用style属性

这是我所学到的JavaScript获取元素的样式，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

JavaScript获取元素的样式相关推荐

JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
JavaScript获取元素样式
元素:style:样式名=样式值读取方式:元素.style.样式名 1.通过style属性设置喝读取的都是内联样式案例:(在此和之前一样,创建HTML就省略不写了,一如既往的给出示例) 2.HT ...
JS获取元素所有样式属性
getComputedStyle getComputedStyle:获取元素所有的样式参数1:要获取样式的对象参数2:伪元素,一般不传,默认为null 返回值:是样式对象获取元素属性的特点: 1 ...
html 获取页面元素高度,浅谈JavaScript获取元素的大小（高度和宽度）的方法
本篇文章给大家介绍一下JavaScript获取元素的大小(高度和宽度)的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在 JavaScript 中,使用下面 3 组属性可以获 ...
jQuery——入门基础(获取元素、样式、属性，选择集、过滤器、样式类)
目录 Jquery的加载方法获取元素操作样式和属性选择集和过滤器选择集转移绑定常用事件操作样式类名 Jquery的加载方法 (1)$(document).ready(function(){ ...
JS获取元素CSS样式
获取元素CSS样式的方法说到在js里修改css样式的属性,我第一个想的是.style属性.然后去具体的修改字体的样式,背景颜色等样式,最近在做一个练习的时候涉及到了这部分的知识. 一·首先style ...
详细解析 JavaScript 获取元素的坐标
随时随地技术实战干货,获取项目源码.学习资料,请关注源代码社区公众号(ydmsq666) from:https://www.cnblogs.com/dong-xu/p/7150715.html?utm ...
javascript获取元素样式值
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...
JavaScript 获取元素及事件
使用ID获取元素对象 document.getElementById( "ID" );:返回文档中一个指定ID的元素对象,用于精确获取:若找到则返回该元素对象,否则返回null 获 ...

JavaScript获取元素的样式

JavaScript获取元素的样式相关推荐

最新文章

热门文章