WebIDE
【JavaScript教程】第4节
JS控制标签CSS

js控制标签CSS很简单，首先先理解dom元素的属性（标签属性）

上节说过，document是js对html中标签的相关方法

在js中，dom元素就是指document标签元素

dom就是标签

而html设计是面向对象编程，前面也说过对象这个数据类型，对象有子属性

🌰🌰🌰🌰
const obj = { name: "李华", value: 666 }

我可以可以通过
obj.name获取"李华"
obj.value获取666

同样也可以通过
obj.name = "张三"
// 此时obj = { name: "张三", value: 666 }
更改对象obj的属性值

而JS通过document获取的dom元素实质就是一个对象

这意味着我们可以通过更改dom元素的相关属性来控制标签的CSS属性

一般我们喜欢在style标签里写标签的CSS属性，其实，也可以在标签的style属性里写css

🌰🌰🌰🌰
<p style="color:red">我是红色文字</p>
上面代码运行后页面会显示红色的“我是红色文字”

标签的style属性里可以写CSS代码来更改标签的外观

回归正题，通过JS更改标签CSS属性
html中：
<p id="str">我是一个文本</p>
<button>点击文本变红色</button>

js中：
// 获取button标签
const button = document.querySelector("button")

// 获取p标签
const str_dom = document.querySelector("#str")

// 为button添加点击事件
button.onclick = ()=>{
// 更改p标签style属性里的color
str_dom.style.color = "red"
}

上示代码可以实现一个点击按钮标签字体颜色改变的效果
其他CSS属性也可以通过这个方法实现

注意：带“-”的CSS属性其对应的JS写法会有轻微区别，比如background-color

🌰🌰🌰🌰
// 更改标签背景为红色
dom.style.backgroundColor = "red"

// 更改标签内文字颜色为红色
dom.style.color = "red"

// 更改标签内文字居中
dom.style.textAlign = "center"

// 更改标签外边框2px粗，颜色为红色
dom.style.border = "solid 2px red"

JS中dom的其他属性
// 此代码可以更改标签内的文字为“你好”
// 也可以通过dom.innerText获取标签内的文字
dom.innerText = "你好"

// 此代码可以更改标签内的标签
// 可以获取，如上
dom.innerHTML = "<p>这是文字</p>"

// 此代码可以更改img标签加载的图片
// 可以获取，其值为图片URL，字符串类型
img.src = "新的图片路径"

教程结束......
下节演示如何写一个自定义弹窗
2024-09-13
浏览584
技术分享
登录后评论
2
1