집 > 기사 > 웹 프론트엔드 > 자바스크립트(코드)를 사용하여 요소 CSS 스타일을 수정하는 세 가지 방법

자바스크립트(코드)를 사용하여 요소 CSS 스타일을 수정하는 세 가지 방법

不言원래의: 2018-08-21 14:46:5420711검색

이 글의 내용은 JavaScript로 요소의 CSS 스타일을 수정하는 세 가지 방법(코드)에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

요소의 CSS 스타일을 수정하려면 일반적으로 태그의 스타일 속성이나 헤더의 스타일 태그에서 해당 요소를 추가, 삭제, 수정합니다.

다음은 JS를 사용하여 요소의 CSS 스타일을 수정하는 세 가지 실용적인 방법입니다.

첫 번째 방법: 해당 태그에 해당하는 javascript 객체 .style을 가져와 값을 할당합니다

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.square{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<p class=""></p>
		<script>
			//第一种:获取相应标签对应的 javascript对象. style
			(function(){
				var p= document. getElementsByTagName("p")[0];
				p.style.backgroundColor=red;
				p style. width= "300px";
				p style. height="300px";
			})();
		</script>
	</body>
</html>

두 번째 방법: 해당 태그에 해당하는 javascript 객체를 가져옵니다.className

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.square{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<p class=""></p>
		<script>
			//第二种:获取相应标签对应的 javascript对象. className
			var p= document. getElementsByTagName("p")[0];
			p.className="square";
		</script>
	</body>
</html>

세 번째 방법: setAttribute(" 속성 이름"," 속성 값") [넓은 의미에서]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.square{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<p class=""></p>
		<script>
			//第三种：通过setAttribute("属性名","属性值")
			var p= document. getElementsByTagName("p")[0];
			p.setAttribute("class","square");
			p.removeAttribute("class");
		</script>
	</body>
</html>

자바스크립트(코드)를 사용하여 요소 CSS 스타일을 수정하는 세 가지 방법

관련 기사