获取及修改网页背景色和字体颜色是web前端开发常见操作。下面是如何使用JS获取及修改网页背景色和字体色的攻略。
获取网页背景色和字体颜色
获取背景色
- 方法一：通过document.body.style.backgroundColor获取网页背景色
console.log(document.body.style.backgroundColor); // 输出网页背景色
- 方法二：通过window.getComputedStyle方法获取网页背景色
const bodyStyle = window.getComputedStyle(document.body);
console.log(bodyStyle.backgroundColor); // 输出网页背景色
获取字体颜色
- 方法一：通过document.body.style.color获取网页字体颜色
console.log(document.body.style.color); // 输出网页字体颜色
- 方法二：通过window.getComputedStyle方法获取网页字体颜色
const bodyStyle = window.getComputedStyle(document.body);
console.log(bodyStyle.color); // 输出网页字体颜色
修改网页背景色和字体颜色
修改背景色
document.body.style.backgroundColor = '#f2f2f2'; // 修改背景色为灰色
修改字体颜色
document.body.style.color = 'red'; // 修改字体颜色为红色
示例说明
下面的示例是一个点击按钮，切换网页背景色和字体颜色的代码。
<!DOCTYPE html>
<html>
<head>
<title>修改背景色和字体颜色示例</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button id="changeColorBtn">切换颜色</button>
<script>
const changeColorBtn = document.getElementById('changeColorBtn');
let isGrayBg = true; // 当前背景色为灰色
let isRedColor = false; // 当前字体颜色为黑色
changeColorBtn.addEventListener('click', function() {
if (isGrayBg) {
document.body.style.backgroundColor = 'white';
isGrayBg = false;
} else {
document.body.style.backgroundColor = 'gray';
isGrayBg = true;
}
if (isRedColor) {
document.body.style.color = 'black';
isRedColor = false;
} else {
document.body.style.color = 'red';
isRedColor = true;
}
})
</script>
</body>
</html>
以上代码中，点击按钮会触发监听函数，函数会判断当前的背景色和字体颜色是否为预设的值，然后分别修改为不同的颜色。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js获取及修改网页背景色和字体色的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 