JS中style属性

2023年6月11日上午4:34 • JavaScript

下面是JS中style属性的完整攻略：

1. 简介

在JavaScript中，我们可以使用style属性来修改HTML元素的样式。style属性是一个对象，在该对象中，我们可以使用CSS属性名作为属性名称，将CSS属性值作为属性值，来设置HTML元素的样式属性。

2. 基本用法

style属性在DOM中表示一个元素的样式，可以通过以下方式访问：

var element = document.getElementById("example");
element.style

通过上面的代码，我们可以获取到id为"example"的元素对象，然后通过element.style来访问该元素的样式。

接下来，我们可以使用CSS属性名作为属性名称，将CSS属性值作为属性值，来设置HTML元素的样式属性。

例如，下面的代码设置了id为"example"的元素的背景颜色和字体颜色：

var element = document.getElementById("example");
element.style.backgroundColor = "red";
element.style.color = "white";

3. 可以设置的样式属性

style属性可以设置HTML元素的大部分CSS样式属性，例如：

width
height
background-color
color
font-size
font-family
margin
padding
border
...

4. 示例说明

下面是两条示例说明：

示例一

<!DOCTYPE html>
<html>
<body>

<p id="example">JavaScript修改样式示例</p>

<script>
var element = document.getElementById("example"); // 获取元素对象
element.style.backgroundColor = "blue"; // 修改背景颜色
element.style.color = "white"; // 修改字体颜色
element.style.border = "1px solid black"; // 修改边框
element.style.padding = "10px"; // 修改内边距
element.style.margin = "10px"; // 修改外边距
element.style.fontSize = "20px"; // 修改字体大小
element.style.fontFamily = "Arial"; // 修改字体
element.style.width = "200px"; // 修改宽度
element.style.height = "100px"; // 修改高度
</script>

</body>
</html>

通过上面的代码，我们可以修改一个段落元素的样式，设置背景颜色、字体颜色、边框、内边距、外边距、字体大小、字体和宽度、高度等样式属性。

示例二

<!DOCTYPE html>
<html>
<body>
<h1 id="example">JavaScript设置CSS样式示例</h1>

<script>
function changeStyle() {
  var element = document.getElementById("example"); // 获取元素对象
  element.style.backgroundColor = "red"; // 修改背景颜色
  element.style.color = "white"; // 修改字体颜色
  element.style.fontSize = "30px"; // 修改字体大小
  element.style.fontFamily = "Arial"; // 修改字体
  element.style.textAlign = "center"; // 修改文本对齐方式
  element.style.padding = "20px"; // 修改内边距
  element.style.margin = "10px"; // 修改外边距
}

// 点击按钮触发样式修改事件
document.getElementById("btn").addEventListener("click", changeStyle);
</script>

<button id="btn">修改样式</button>

</body>
</html>

通过上面的代码，我们可以动态修改HTML元素的样式，通过一个按钮触发事件来修改文字的背景颜色、字体颜色、字体大小、字体、文本对齐方式、内边距、外边距等样式属性。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS中style属性 - Python技术站