Question

我想得到一个元素的行高，就这么简单。

我知道这有效

console.log(document.getElementById("myDiv").style.lineHeight);

console.log($("#myDiv").css('lineHeight'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" style="line-height:30px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

但我真正的问题是 - 如果将样式应用于父元素，我们可以得到元素的行高吗？

console.log(document.getElementById("myDiv").style.lineHeight);

console.log($("#myDiv").css('lineHeight'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="line-height:30px;">
  <div id="myDiv">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

或如何获取它如果是浏览器的默认值。

console.log(document.getElementById("myDiv").style.lineHeight);

console.log($("#myDiv").css('lineHeight'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="myDiv">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

但在所有这些情况下 jQuery 会返回我需要的值，但我需要使用 javascript 获取值。

任何帮助将不胜感激。

Answer 1

您可以使用getComputedStyle方法获取样式...这实际上是在jquery中使用...

＆＃13;

//console.log(document.getElementById("myDiv").style.lineHeight);

//console.log($("#myDiv").css('lineHeight'));


var elem = document.getElementById("myDiv");
var view = elem.ownerDocument.defaultView;

console.log(view.getComputedStyle( elem )['line-height']);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="myDiv">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

＆＃13;

Javascript在所有状态下获得元素的样式

1 个答案: