JavaScript 实现获取行内样式和当前样式的代码

于 2023-10-06 17:43:02 发布
阅读量145 收藏
点赞数
文章标签： javascript 开发语言 ecmascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laugh666/article/details/133615565
版权
js 专栏收录该内容
527 篇文章 17 订阅 ¥59.90 ¥99.00
订阅专栏
本文介绍了如何使用JavaScript获取HTML元素的行内样式和当前样式。行内样式通过style属性获取，而当前样式则通过getComputedStyle方法获取。文章提供了详细的代码示例，解释了如何访问和操作这些样式属性，强调了这两个方法在动态处理样式时的重要性。
摘要由CSDN通过智能技术生成

在 JavaScript 中，我们可以通过不同的方法来获取元素的行内样式和当前样式。行内样式是直接在 HTML 元素的 style 属性中定义的样式，而当前样式是指应用在元素上的最终生效的样式。下面是获取行内样式和当前样式的代码示例。

获取行内样式：
要获取元素的行内样式，我们可以使用元素对象的 style 属性。style 属性返回一个对象，该对象包含了元素的所有行内样式属性及其对应的值。

// 获取元素的行内样式
var element = document.getElementById('myElement');
var inlineStyle <
了解本专栏 订阅专栏 解锁全文
大笑编程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
js获取内联样式的方法
12-08
本文实例讲述了js获取内联样式的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/> <title>javascript 获取内联样式</title> </he
javascript基础--获取行内样式
Z19871124123456的博客
02-27 179
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 { width: ...
js 获取行间样式
WangJiangNan17214的博客
08-31 468
获取行间样式     #div1{width:200px;height:200px;background:red;margin:20px;}       function getStyle(obj,name){        if(obj.currentStyle){         return obj.currentStyle[name];        }else{
Js获取/设置行内样式和非行内样式
weixin_30908103的博客
11-05 1065
1、获取行内（内嵌、行间）样式： 　　obj.style.attr;进行获取非行间样式。 2、设置行内样式： 　　obj.style.attr = value; 3、获取非行内样式： function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值 if(obj.currentStyle){ //针对ie获取非行...
js获取元素样式-行内样式、内部样式、外部样式
个人博客
12-12 2723
js获取元素样式一、行内样式具体实现二、获取所有样式具体实现 一、行内样式 具体实现 在js获取到dom元素之后，使用其style属性即可获取到其所有的行内样式 <div id="div1" style="width: 100px; height: 200px"></div> const div1 = document.getElementById('div1'); console.log(div1.style); console.log('height:' + div1.st
js获取html行内样式与外部样式、外联样式
weixin_46500485的博客
08-28 1572
js获取html行内样式与外部样式、外联样式 1.//获取行内样式 这种方法只能够获取行内样式 var box=document.getElementById("box"); console.log(box.style.width); 2.获取外部样式以及外联样式 (1)除IE外可有使用的方法 //调用getComputedStyle就可以得到计算后的样式 即外部样式以及外联样式 但是只可以在除IE浏览器之外的浏览器使用 var cssObj=window.getComputedStyle(box);
JavaScript如何获取样式（行间）
wd
11-21 1303
前言：又接触了一些不知道的知识，真开心。下面的样式都只适用于行间样式！！！下面的样式都只适用于行间样式！！！下面的样式都只适用于行间样式！！！1、cssText关于这个属性，大家应该都很属性。<div class="box" style="color: red;font-size: 34px;"> welcome </div> <script> window.onload = fun
JS 初操作元素样式属性+获取元素篇
い南秋乱港
07-24 159
JS 操作元素属性和样式 通过点语法, 操作style属性间接操作元素的css样式 div1.style.width = "300px"; JS里的样式名, 如果出现多个单词, 不再用-链接, 写成驼峰 div1.style.backgroundColor = "blue"; JS设置的样式, 全部为行间css样式 例：随机改变颜色 var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 25
23 - JavaScript 通过style对象设置行内样式
热门推荐
JayYuen的博客
11-13 1万+
style属性的获取和修改 在DOM当中，如果想设置样式，有两种形式： className（针对内嵌样式） style（针对行内样式） 这篇文章，我们就来讲一下style。 需要注意的是：style是一个对象，只能获取行内样式，不能获取内嵌的样式和外链的样式。例如： <!DOCTYPE html> <html lang="en"> <head> ...
js获取css样式
u011295864的博客
03-11 4548
情况分为两种：第一种 行内样式 第二种 其他样式 一、行内样式获取比较简单，一般通过element.style.attr即可获取样式。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/tit
获取元素的style样式（内联，内部）
xi_2130的博客
09-26 9242
我们在实际应用中，经常会获取元素的样式， 我们会这样获取：获取内嵌样式<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>获取非行间元素样式</title> <style type="text/css">
怎么修改html行内样式表,原生JS获取及设置CSS样式-1.行内样式
weixin_42190030的博客
06-03 1324
面试中，应该会经常被问到样式的写法以及如何使用原生JS获取及操作样式的问题吧，让我给大家总结一下~HTML中样式的写法不外乎以下四种方式行内样式假装有内容head内部样式div {width: 100px;line-height: 100px;background-color: red;border: 6px solid #ccc;text-align: center;}外链样式导入样式@impo...
js获取元素具体样式属性值
sushans的博客
06-18 7884
1.元素.style.属性名需要把元素的样式都写在行内样式上才可以（写在样式表中不起作用） 在真实项目中，这种方式不常用（无法实现css和html分离）2.使用window.getComputedStyle这个方法获取所有经过浏览器计算过的样式（只要当前的元素标签可以在页面中呈现出来，那么它的所有样式都是经过浏览器计算过的/渲染过的），哪怕有些样式没有写，我们也可以获取到 window.get
从零开始前端学习[47]:如何使用javascript来操作行内样式或者属性浅析
章飞 _906285288的博客
11-09 2135
如何使用javascript来操作行内样式或者属性 使用javascript来操作行内样式，或者标签固有属性 提示 博主:章飞_906285288 博客地址：http://blog.csdn.net/qq_29924041 使用javascript来操作行内样式，或者标签固有属性我们知道，html是结构层，css是样式层，而js则是行为层，一个页面的样式控制主要是css来进行控制的，而
js 获取DOM元素样式
challenge_impossible的博客
05-23 7959
    HTML的样式写入方法有：1、行内样式；2、内嵌样式；3、外联样式表。    行内样式：一般是用style写在dom元素上的，例如：&lt;div style='height:200px;'&gt;&lt;/div&gt;;    内嵌样式：一般是用style写在head标签内的。&lt;style type='text/css'&gt;&lt;/style&gt;;    外联样式：一般...
html行内设置样式,Js获取/设置行内样式和非行内样式
weixin_34442215的博客
06-09 1388
1、获取行内(内嵌、行间)样式：obj.style.attr;进行获取非行间样式。2、设置行内样式：obj.style.attr = value;3、获取非行内样式：function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值if(obj.currentStyle){ //针对ie获取非行间样式return obj.currentStyle[a...
js如何获取非行间样式
哎
03-14 4815
我们都知道，js不能直接获取样式表中的样式，例如width，left，只能直接获取行内样式，但是现在主流不建议写行内样式，因此我们封装一个可以直接获取非行间样式的函数 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } el
JS 获取 元素 非行内样式
xiao_yu_liu的博客
11-30 819
&lt;h1 class="h1class" style="color:red"&gt;测试一哈&lt;h1&gt; .h1class{ font-size:12px; } function getAttr(obj, attr) { //我们把它们封装为一个函数， // 注意了在全局下定义的函数的都会默认设置为window对象的方法， //...
js基础——操作行内样式和对触发事件的理解
我的博客
08-04 1278
本文是对上一文"js基础"的补充 一、 操作行内样式 1. 上文说到:通过对象.style.属性名js只能操作行内样式。它实际的含义是：通过该方法只能获取到行内样式，但是无论外部样式或者内嵌样式是否有某一个属性，都可以通过对象.style.属性名修改该属性的值，此时相当于给行内样式增加该属性，并赋值。当该对象的行内样式的属性有值时，由于行内样式的优先级大于内嵌样式，故最终会应用新的值 &lt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值