js获取元素样式ele.style.attribute只能获取内敛样式的属性值！内部样式的属性值获取不了！怎么解决？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js获取元素样式ele.style.attribute只能获取内敛样式的属性值！内部样式的属性值获取不了！怎么解决？相关的知识，希望对你有一定的参考价值。
<html>
<body>
<div style='border:1px solid #ccc;display:block;'></div>
<script>alert(document.getElementsByTagName('div')[0].style.display);</script> #这样能够获取div的指定样式属性值。但是如果将div的样式写在内部样式里<style type='text/css'>div.......</style>，js就不能获取元素的样式属性值了！（虽然能够通过getComputedStyle获取，但是在涉及长宽的时候，他返回的总是一个总计的值，十分不好，且不能修改），怎么解决？同样的问题还出现在ele.style.cssText 中，拜托各位大神速度解决，谢谢了！
</body>
</html>
return this.ownerDocument.defaultView.getComputedStyle(this, null);
);
获取样式的时候吧style改为currentStyle
比如element.style.width改为element.currentStyle.width追问
能否将你的代码解释一下？第一行代码看不懂。我只知道是定义HTMLElement类的一个不知道方法还是属性，然后就可以直接调用此方法了。个人觉得这个方法很强大，是接近底层的操作，就如同授人以鱼不如授人以渔中的渔，吸收了这个，以后就可以直接在不加载任何东西的情况下使用了，虽然效果不是最佳，但非常值得学习，大神，麻烦详尽解释下
追答其实这个方法很简答，只是是写原型上的。具体的实现还是下面的
return this.ownerDocument.defaultView.getComputedStyle(this, null);
如果不懂的话，百度js原型
HTMLElement指的是html对象
prototype对象类型原型的引用
__defineGetter__定义一个获取的方法 参考技术A 给你一段代码：
<html>
<head>
<title>JQuery中如何获取样式属性的值</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
.top
background: url(Tupian.jpg) no-repeat;
width: 75px;
height: 90px;
</style>
<script type="text/javascript">
$(function ()
var url = $("div.top").css("background-image");
alert(url);
)
</script>
</head>
<body>
<div class="top"></div>
</body>
</html>追问
是使用纯粹的javascript，不加载jquery库。如何做到？
获取元素样式并将其分配给 vue.js 中的另一个元素
【中文标题】获取元素样式并将其分配给 vue.js 中的另一个元素【英文标题】：get element style and assign it to another element in vue.js 【发布时间】：2018-01-05 23:54:53 【问题描述】：我正在使用 VUE.js 2
这是我的 DOM：
<aside :style="height : height()" class="col-sm-4 col-md-3 col-lg-3">...</aside>
<main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents">...</main>
这是我的脚本：
export default
data()
return
,
methods:
height ()
return this.$refs.userPanelMainContents ? this.$refs.userPanelMainContents.offsetHeight + 'px' : '0px'
我想获取 userPanelMainContents 高度并将其分配给旁边的标签。 我该怎么做？！！！
【问题讨论】：
【参考方案1】：尝试返回一个数据属性而不是使用返回高度的方法，然后你可以使用mounted函数设置高度。
像这样：
<aside :style=" height: height " class="col-sm-4 col-md-3 col-lg-3">...</aside>
<main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents">...</main>
export default
data()
return
height: '0px'
,
mounted ()
this.height = this.$refs.userPanelMainContents[0].style.height;
已编辑：将计算属性更改为数据属性，并在调用挂载事件时设置它。
它将使用不同的语法，因为我不能在 codepen 上使用 .vue 文件，但这里是工作代码。
https://codepen.io/michael_coder/pen/qXbxXW
【讨论】：
渲染函数中的错误：“TypeError：无法读取未定义的属性'userPanelMainContents'” 我会为你编辑和修复它。我认为正在发生的事情是在计算之后创建了参考。 我使用 *.vue 文件和 webpack。这种结构有可能造成这种情况吗？ 全部编译到 es2015。这不应该导致问题。我一直在使用 *.vue 和 webpack。 不幸的是没有字！！以上是关于js获取元素样式ele.style.attribute只能获取内敛样式的属性值！内部样式的属性值获取不了！怎么解决？的主要内容，如果未能解决你的问题，请参考以下文章