时间戳

首页 > 解决方案 > 如何获取css样式规则或html标签样式中设置的样式宽度值

javascript - 如何获取css样式规则或html标签样式中设置的样式宽度值

问题描述

我想通过 CSS 规则或元素的内联样式获取 textarea 元素的宽度，如 Chrome 检查的元素选项卡中所示，如果没有任何 CSS 规则适用于元素或它们被内联样式覆盖。我想将 span 的 max-width 设置为 textarea 的宽度值，然后将 textarea 中的一行文本复制到 span 中，并确定该行是否以及如何换行。

但是，当我使用jQuery css( 'width' )、document.querySelector( 'textarea' ).style.width和window.getComputedStyle( document.querySelector( 'textarea' ).getPropertyValue( 'width' )时，返回值通常不是由规则或元素标记中的内联样式设置的值。

在我的情况下，上述方法返回 131.818px 而不是 150p，这足以让我无法使用上述方法。

这是我正在谈论的一个例子：

var $textarea = $( 'textarea' );
var textarea  = $textarea[ 0 ];
var $p        = $( 'p' );
var p         = $p[ 0 ];

p.innerHTML = "The following are textarea <b>width</b> values,<br />" +
              "but they aren't the value set in the style tag textarea rule:<br /><br />" +
              "<t />jQuery css( 'width' ) result: '" + $textarea.css( 'width' ) + "'<br />" +
              "<t/>computed width: '"  +
              window.getComputedStyle( document.querySelector( 'textarea' ) )
              .getPropertyValue( 'width' ) + "'<br />" +
              "<t/>style.width value: " +
              "'" + textarea.style.width + "'" + "'<br />";
textarea {
  height: auto;
  width:  150px;
}
t::before {
  content: "...."
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea>Line 1

line 3

Line 5 - A long line intended to wrap because it is longer than the textarea's specified width.
Line 6 - A short line.

Line 8 - Another long line, that should also wrap.

Line 9</textarea>

<p></p>

我可以通过解析元素的内联样式分配的outerHTML属性来获取宽度值和/或通过在内联样式未设置宽度时解析它们的规则从样式标签中获取它，但这比看起来更困难就像它应该得到不变的宽度值一样。

关于如何最好地做到这一点的任何想法？

谢谢。

标签： javascriptjqueryhtmlcss

解决方案

添加box-sizing: border-box;到 textarea 样式，它应该正确显示值

textarea {
  height: auto;
  width:  150px;
  box-sizing: border-box;
}

推荐阅读