获取元素坐标位置中var和let的区别

操作元素样式有两种方式，一种是操作style属性，另一种是操作className属性，下面我们会单独讲解。

1. 操作style属性

除了上面解释的元素内容和属性，对于元素对象的样式，直接通过“元素对象.style.样式属性名”的方式操作。样式属性名可以对应CSS样式名，但是CSS样式名中的连字符“-”应该去掉，连字符后面的英文首字母应该大写。例如，样式名font-size用于设置fontSize，对应的样式属性名为fontsize。

为了方便读者学习和使用，我们在下面的表1中列出了常见样式属性中CSS样式名称的编写和描述。

1表的常用样式属性操作的样式名。

名称

说明

背景

或者设置返回元素的背景属性。

背景颜色

或者设置返回元素的背景色。

显示

或者设置返回元素的显示类型。

字体大小

或者设置返回元素的字体大小。

高度

或者设置返回元素的高度。

左边的

或者设置定位元件的左侧位置。

列表样式类型

或者设置返回列表项标记的类型。

泛滥

或者设置如何处理元素框外呈现的内容。

文本对齐

或者设置返回文本的水平对齐方式。

文本装饰

或者设置返回文本的装饰。

文本缩进

或者设置返回文本第一行的缩进。

改变

对元素应用2D变换或三维变换。

接下来，代码显示如何添加元素的样式。具体例子如下。

div id='box'/div

脚本

var ele=document . queryselector(' # box ')；//获取元素对象。

ele . style . width=' 100 px '；

ele . style . height=' 100 px '；

ele . style . transform=' rotate(7)'；

/script

以上4~6行代码是用来给得到的ele元素对象添加样式的，其效果相当于在CSS中添加了以下样式。

# box { width: 100px高度： 100像素；变压器：旋转(7)；}

2. 操作className属性

在开发中，如果有很多样式修改，可以通过操作className来改变元素样式，语法为“element object”。类名”。访问类名属性的值意味着获取元素的类名，分配类名属性意味着更改元素的类名。如果一个元素有多个类名，它们在类名中用空格隔开。

接下来，代码演示如何使用类名更改元素的样式。

(1)编写html结构代码，具体示例如下。

风格

div {

宽度： 100 px；

高度： 100像素；

背景-颜色：粉色；

}

/style

身体

Div class='first '文本/div

/body

在上面的代码中，第一个类被添加到第9行的div元素中，第一个样式是在style中设置的。浏览器预览效果如图1所示。

图1初始效果。

(2)单击div元素以更改元素的样式。示例代码如下。

脚本

var test=document . queryselector(' div ')；

test . onclick=function(){ 0

this.className=' change

};

/script

在上面的代码中，第2行中获得的div元素存储在测试对象中。第3~5行向文本对象添加onclick click事件，第4行执行事件处理程序，使用this.className将变更类名设置为测试对象，其中this . class name指的是测试对象。

(3)在样式中添加变更类，样式代码如下。更改{

背景-颜色：紫色；

color: # fff

font-size : 25px；

边距-top : 100 px；

}

(4)点击div框，浏览器预览效果如图2所示。

图2点击后的效果。

执行完上面的代码后，原来的类名首先会被直接更改为change。如果您想保留原始类名，可以通过多类选择器修改步骤(2)第四行的代码。示例代码如下。

this.className='第一次更改'；

修改后，在控制台中发现div元素的类已经修改为div class="first change" text /div，并且保留了之前的类名。