获取 HTML select 元素的文本缩进

Question

在 HTML Select 个元素周围有 4px 个缩进。

如何使用 JavaScript

计算/获取准确值

我试过了，但没有得到正确的值

const el = document.querySelector('select');
const computedStyle = getComputedStyle(el);
computedStyle.textIndent // '0px'
computedStyle.padding // '0px'

Answer 1

我会尝试根据 CSS box model 来确定。在你的情况下，我希望它有一个 pading-left。您想要从 select 边框到文本内容的 space。这受 select 填充、选项边距、选项边框和选项填充的影响。

select = window.getComputedStyle(document.querySelector('select'))
option = window.getComputedStyle(document.querySelector('option'))
console.log(select['padding-left'])
console.log(option['margin-left'])
console.log(option['border-left'])
console.log(option['padding-left'])

<select><option>Item</option><select>

Answer 2

你在正确的轨道上

const el = document.querySelector('select');
const computedStyle = getComputedStyle(el);
var indent = computedStyle.textIndent ;
var padding = computedStyle.padding ;
var margin = document.getElementById("myDiv").style.margin;

只需将它们分配给变量也可以使用查询选择器，您可以在页面上有多个变量，这样它会隐藏您要查找的特定变量，因此我更喜欢通过 ID 调用事物

获取 HTML select 元素的文本缩进

Get text indent of HTML select elements

javascript

html-select

text-indent