HTML | DOM 输入数值属性

在HTML中，我们可以为许多元素添加数值属性，比如width、height、padding等等。通过JavaScript，我们可以使用DOM来访问和修改这些属性。

访问数值属性

通过DOM，我们可以使用element.attributeName来访问数值属性。例如，如果我们有一个带有width属性的<div>元素，我们可以使用以下代码来获取它的宽度：

let divElement = document.querySelector("div");

console.log(divElement.width);

如果div元素没有设置width属性，则上述代码将返回undefined。

修改数值属性

我们可以使用DOM来修改数值属性。例如，我们可以使用以下代码将div元素的宽度设置为300px。

let divElement = document.querySelector("div");

divElement.width = "300";

请注意，我们需要将值作为一个字符串传递给数值属性。

使用style属性设置CSS样式

我们还可以使用style属性来设置CSS样式。例如，我们可以使用以下代码将div元素的宽度设置为300px：

let divElement = document.querySelector("div");

divElement.style.width = "300px";

注意，有些属性，在CSS中使用的是不同的名称。例如，在CSS中，我们使用padding-left而不是paddingLeft。在JavaScript中，我们需要使用与HTML属性相同的名称，因此div.style.paddingLeft将不起作用。

在这种情况下，我们需要使用驼峰命名法：div.style.paddingLeft = "10px"。

获取计算后的样式

我们可以使用window.getComputedStyle(element)来获取计算后的样式。这允许我们获取元素的实际颜色、大小、边距等等。这个方法返回一个对象，我们可以通过对象属性来访问样式规则。

例如：

let divElement = document.querySelector("div");
let computedStyle = getComputedStyle(divElement);

console.log(computedStyle.width);
console.log(computedStyle.borderLeftWidth);

此代码将返回div元素的宽度以及左边框的宽度（如果有）。

小结

有许多使用DOM访问和修改数值属性的方式。我们可以直接访问属性，或者使用style属性设置样式。我们还可以获取元素的计算后样式然后访问计算后的属性值。特别注意将数值属性值作为字符串传递。