[DOM] 操作元素改变元素内容(element.innerText、element.innerHTML )、样式属性操作(element.style、element.className)

目录

• [DOM] 操作元素:改变元素内容(element.innerText、element.innerHTML )、样式属性操作(element.style、element.className)
  • 1.改变元素内容
  • 2.常用元素的属性操作
  • 3.表单元素的属性操作

[DOM] 操作元素:改变元素内容(element.innerText、element.innerHTML )、样式属性操作(element.style、element.className)

1.改变元素内容

• element.innerText从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

注在上述代码中，（2）注册事件中显示的时间需要点击按钮才会显示出时间，（3）元素可不要添加事件中直接显示当前事件

• element.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

2.常用元素的属性操作

innerText、innerHTML 改变元素内容

src 、 href

id、alt、title

3.表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

type、value、checked、selected、disabled

4.样式属性操作

通过JSI修改元素的大小、颜色、位置等样式

（1）element.style 行内样式操作

（2）element.className 类名样式操作

注意

• JS里面的样式采取驼峰命名法，比如：fontSize、backgroundColor
• JS修改style样式操作，产生的是行内样式，css权重比较高
• className 会直接更改元素的类名，会覆盖原先的类名

element.style:

element.className: