JS DOM操作（二）

最新推荐文章于 2024-06-01 00:30:00 发布

小杨不想写代码

最新推荐文章于 2024-06-01 00:30:00 发布

阅读量811

点赞数 5

分类专栏： Jscript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_74270395/article/details/136662720

版权

Jscript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.设置元素样式

1.1style属性设置样式

语法

HTML元素.style.样式属性=“值”

示例：

document.getElementById("main").style.color="#FF0000"

1.2样式属性

color：设置文本颜色。
backgroundColor：设置背景颜色。
fontFamily：设置字体系列。
fontSize：设置字体大小。
fontWeight：设置字体粗细。
textAlign：设置文本对齐方式。
padding：设置内边距。
margin：设置外边距。
border：设置边框样式。
width：设置元素宽度。
height：设置元素高度。
display：设置元素的显示方式（如block、inline、none）。
position：设置元素的定位方式（如static、relative、absolute）。
top、right、bottom、left：用于绝对定位元素的位置设置。

1.3JS常用的事件

click - 当用户点击某个元素时触发。
mouseover - 当鼠标指针移动到元素上方时触发。
mouseout - 当鼠标指针移出元素时触发。
keydown - 当用户按下键盘上的任意键时触发。
keyup - 当用户释放键盘上的键时触发。
change - 当表单元素的值发生改变时触发（适用于 input、select、textarea 等元素）。
submit - 当表单提交时触发。
load - 当页面或图像加载完成时触发。
scroll - 当用户滚动页面时触发。
resize - 当窗口大小发生改变时触发。

// 示例：为按钮添加点击事件监听
var myButton = document.getElementById('myButton');

myButton.addEventListener('click', function() {
    // 在按钮点击时执行的操作
    console.log('按钮被点击了！');
});

1.4className属性设置样式

语法

HTML元素.className=“样式名称”

获取元素：首先需要获取要设置样式的元素，可以通过 document.getElementById() 或其他 DOM 方法获取到对应的元素。
设置 className：通过将要应用的 CSS 类名赋值给元素的 className 属性来设置样式。
注意事项：
如果要为元素应用多个类，可以使用空格分隔类名，如 ‘class1 class2’。
使用 className 会覆盖元素原有的所有类，如果只想添加一个新类而保留原有类，可以使用 classList.add() 方法。

var element = document.getElementById('myElement');

// 设置 className
element.className = 'highlight'; // 设置单个类

// 添加新类并保留原有类
element.classList.add('italic');

2.获取元素的样式

2.1 元素的样式

语法

HTML元素.style.样式属性:

HTML元素是通过DOM方法获取到的HTML元素对象。
样式属性是要访问或修改的CSS样式属性，例如color、font-size、background-color等。
值是要设置给样式属性的具体值，可以是字符串、数字或其他合法的CSS值。

示例代码：

<!DOCTYPE html>
<html>
<body>

<h1 id="myHeading">Hello, World!</h1>

<script>
// 获取元素对象
var heading = document.getElementById("myHeading");

// 修改样式
heading.style.color = "red";
heading.style.fontSize = "24px";
heading.style.backgroundColor = "yellow";
</script>

</body>
</html>

2.2 getComputedStyle()

语法

window.getComputedStyle(element [, pseudoElt]);
element：要获取样式信息的元素对象。
pseudoElt (可选)：一个可选的伪元素字符串，比如 ::before 或 ::after，用于获取相应伪元素的样式信息。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        #myElement {
            color: red;
            font-size: 16px;
            margin-left: 20px;
        }
    </style>
</head>
<body>

<div id="myElement">Hello, World!</div>

<script>
var element = document.getElementById('myElement');
var computedStyle = window.getComputedStyle(element);

console.log(computedStyle.color); // 获取文字颜色
console.log(computedStyle.fontSize); // 获取字体大小
console.log(computedStyle.marginLeft); // 获取左边距
</script>

</body>
</html>