이 기사는 주로 JS를 사용하여 웹 페이지 요소 스타일을 수정하는 코드 예제에 대해 설명합니다. 관심 있는 친구가 이 기사를 읽고 도움이 되기를 바랍니다.
프론트엔드 개발에서 웹페이지 요소의 스타일을 동적으로 수정해야 하는 경우가 있습니다. JS를 사용하여 요소 스타일을 동적으로 수정하는 방법을 요약해 보겠습니다.
웹 페이지 구조:
버튼:
라벨: 입력 유형: 버튼 ID: btn 값: 클릭
1. ClassName 사용2. 스타일 개체 사용 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作元素的样式</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" id="btn" value="点 我" />
<div id="box"></div>
<!-- 添加JS代码 -->
<script type="text/javascript">
//定义函数my$-根据元素id获得页面元素,目的是为了提高效率
function my$(id){
return document.getElementById(id);
}
// 方法1.根据ClassName修改元素的样式
// var btn=my$('btn');
// btn.onclick=function(){
// my$('box').className='box';
// }
//方法2.根据Style对象修改元素的样式
var btn=my$('btn');
btn.onclick=function(){
var box=my$('box');
box.style.width="100px";
box.style.height="100px";
box.style.backgroundColor="red";
}
</script>
</body>
</html>HTML 비디오 튜토리얼
참고: 1. 스타일을 운영할 때 예제 스타일 ClassName을 사용해야 합니까, 아니면 Style 객체를 사용해야 합니까? ?여러 스타일 속성을 설정할 때는 클래스 스타일을 사용하는 것이 편리합니다
스타일 속성을 적게 설정할 때는 Style 객체를 사용하는 것이 더 편리합니다2 Style 객체를 사용할 때 width 및 height 속성을 만났을 때, px 단위를 추가해야 합니다. 3 스타일 개체 속성 스타일의 값은 문자열입니다. 결과 그림은 다음과 같습니다.
위 내용은 웹 페이지 요소 스타일을 동적으로 수정하는 Node.js 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
