JavaScript를 사용하여 CSS 파일을 로드하는 방법은 무엇입니까? (코드 예)
- 青灯夜游원래의
- 2019-02-23 09:59:543546검색
CSS 파일은 HTML 요소가 표시되는 방식을 설명하는 데 사용되며 HTML 문서에 CSS 파일을 추가하는 다양한 방법이 있습니다. JavaScript는 HTML 문서에 CSS 파일을 로드할 수 있는데, JavaScript를 사용하여 CSS 파일을 로드하는 방법은 무엇입니까? 다음 글에서 이를 소개하겠습니다. 도움이 되셨으면 좋겠습니다. [동영상 튜토리얼 추천: JavaScript 튜토리얼]
)
방법:
● document.getElementsByTagName() 메소드를 사용하여 HTML 헤더 요소를 가져옵니다.
● 새로운 링크 요소를 생성하려면 createElement('link') 메소드를 사용하세요.
● 링크 요소의 속성을 초기화합니다.
● 헤더에 링크 요소를 추가합니다.
코드 예제
다음은 JavaScript가 HTML 문서에서 CSS 파일을 로드하는 방법을 보여주는 코드 예제입니다.
예 1:
style.css라는 이름으로 파일 만들기:
.demo {
width: 400px;
height: 200px;
border: 1px solid red;
color:red;
margin: 50px auto;
text-align: center;
line-height: 200px;
}JavaScript를 사용하여 CSS 파일 추가:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Load CSS file using JavaScript
</title>
<script>
// 获取HTML头元素
var head = document.getElementsByTagName('head')[0];
// 创建新链接元素
var link = document.createElement('link');
// 设置链接元素的属性
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style.css';
// 将链接元素附加到HTML头
head.appendChild(link);
</script>
</head>
<body>
<h2 class="demo">php中文网！</h2>
</body>
</html>출력:
 "155082967243291JavaScript를 사용하여 CSS 파일을 로드하는 방법은 무엇입니까? (코드 예)")
예 2:
style.css 파일 코드:
.demo {
width: 400px;
height: 100px;
border: 1px solid green;
font-size:25px;
font-weight:bold;
color:white;
background-color:pink;
text-align:center;
line-height: 100px;
margin: 50px auto;
}JavaScript를 사용하여 CSS 파일 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Load CSS file using JavaScript
</title>
<script>
// 创建新链接元素
var link = document.createElement('link');
// 设置链接元素的属性
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style.css';
// 获取 head元素以向其追加链接元素
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</head>
<body>
<h2 class="demo">php中文网！</h2>
</body>
</html>출력:
위는 이 글의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! !
위 내용은 JavaScript를 사용하여 CSS 파일을 로드하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!