更改网页元素

核心提示JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。昨天我们已经说过了操作DOM的三个步骤 :1. 获取事件源 ,2.绑定事件 ,3.添加事件处理程序 ,获取元素我

Javascript的DOM操作可以改变网页的内容、结构和风格。我们可以使用DOM操作元素来改变元素中的内容、属性等等。

昨天我们讲了操作DOM的三个步骤:1。获取事件源,请按2。绑定事件,3。添加事件处理程序,并获取元素。我们说过,如果你想给一个元素添加特效,你必须先得到这个元素。然后,我们需要知道我们想要给元素添加什么特效,是点击还是拖动它使其改变。

现在,我们来具体看看如何操作元素来改变我们已经获得的元素。注意,所有的DOM操作都必须有三个步骤。

如何使用DOM改变元素的内容?

语法:element.innerText或element.innerHTML

准备两个HTMLbia'q操作DOM的三个步骤别忘了点击上面的橘色按钮下面的内容就会换

innerText和innerhtml的区别:innerText删除空单元格和换行符,而innerHTML保留空单元格和换行符。innerText不能识别HTML标签,但是innerHTML可以。

两种方式添加同样的内容对比innerText不能识别pbiao'q

如何操作DOM修改元素属性

语法:元素对象。属性名=值

先获取元素,然后点属性等于新值。

现阶段常见的属性修改图片路径属性src和图片标题title点击按钮改变图片路径和图片上的标题

表单元素的属性操作

常见的表单属性

注意:表单元素中有一些属性,如禁用、选中和选中。元素对象的这些属性值是布尔型的,即true和false。如果您想在单击后禁用该按钮,请让“按钮。disabled=true”这样用户就不能再点击这个按钮了。

最常见的形式是登录界面,如登录、淘宝登录等。我们来看看最常见的密码切换显示和隐藏。

登陆时常见的切换密码改变type属性值来切换密码状态

如何操作DOM改变元素的样式

通过操作DOM,我们不仅可以改变元素的内容和属性,还可以改变元素的样式。

有两种常见的方法:

Element.style由inline style操作。

注意两点:

JS中的样式一般采用驼峰命名法,如fontSize、backgroundColor和borderSize。

JS修改样式操作,导致内联样式,CSS权重比较高。

创建一个蓝色的盒子点击改变它的样式改变盒子的宽du和颜色驼峰ming'm

Element.className如果样式修改较多,可以通过操作类名来改变元素的样式。

注意:class是一个保留字,所以className用于操作元素类名属性。

ClassName直接改变元素的类名,覆盖原来的类名。

这里有一个演示。首先,一个盒子首先有一个对应类名的样式。我们点击框,将类名切换到change对应的样式,它必须有first的宽度和高度样式。如果您简单地先更改为change,则该框将没有宽度和高度100,其宽度将与浏览器窗口一样宽。

首先定义好两个样式change和first两个类名同时存在类名不是被替换 ,而是都要

总结:DOM操作是改变元素内容样式最常用的方式。不同属性样式的组合可以使我们的网页更加生动。

DOM操作元素的总结
 
友情链接
鄂ICP备19019357号-22