Question

我有一个像这样的dom元素。

<div class="MyClass" id="123" style="width: 228px; overflow: auto; height: 100px;">
    <div class="loading-indicator">loading...</div>
</div>

我想从标记div获取宽度为228并存储在某个变量中，以后我可以使用。

var st = 228px; // dynamically

我想在这里使用。

var secondDiv = document.createElement('div');
secondDiv.style = "background-color:#2C8DC2;color:white;padding:5px; margin-top:102px;height: 50px; width : st; border-style: solid;";

现在我在这里尝试的是：

var abc = firstDiv.getAttribute（＆＃39; style＆＃39;）;

我得到："width: 228px; overflow: auto; height: 100px;"

abc.width;

但这未定义。

如何获取该值。

Answer 1

你可以这样试试。

window.getComputedStyle(ele); gives you element style.

var ele = document.getElementById("123"), // Do not use #
    eleStyle = window.getComputedStyle(ele);
/* Below is the width of ele */
var eleWidth = eleStyle.width;
console.log(eleWidth);

<div class="MyClass" id="123" style="width: 228px; overflow: auto; height: 100px;">
    <div class="loading-indicator">loading...</div>
</div>

Answer 2

在jQuery中，您可以

alert($("#123").css("width")); // which will return 228px;

<div class="MyClass" id="123" style="width: 228px; overflow: auto; height: 100px;">
    <div class="loading-indicator">loading...</div>
</div>

如果你仍想在直接的javascript中实现它

使用此引用：How to get an HTML element's style values in javascript?

Answer 3

为什么不使用 jQuery ？

console.log($(`#123`).css('width'));

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
  
<div class="MyClass" id="123" style="width: 228px; overflow: auto; height: 100px;">
    <div class="loading-indicator">loading...</div>
</div>

如何在Javascript中获取html样式属性

3 个答案: