JavaScript가 CSS 페이지 스타일을 동적으로 변경하는 방법
- 不言원래의
- 2018-11-30 10:12:433219검색
JavaScript가 CSS 페이지 스타일을 동적으로 변경하는 방법는 CSS 페이지 스타일을 어떻게 동적으로 변경하나요? JavaScript가 CSS 페이지 스타일을 동적으로 변경하는 방법에서 페이지 스타일을 변경하려면 해당 요소의 스타일 속성을 변경해야 합니다. 구체적인 구현 내용을 살펴보겠습니다.
예제를 직접 살펴보겠습니다
코드는 다음과 같습니다
JavaScript가 CSS 페이지 스타일을 동적으로 변경하는 방법ChangeCssTextBox.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function SetColor(foreColor, backColor) {
target = document.getElementById("page");
if (target != null) {
target.style.backgroundColor = document.form1.Text1.value;;
target.style.color = document.form1.Text2.value;
}
}
</script>
</head>
<body id="page">
<form name="form1">
<div>背景色<input id="Text1" type="text" /></div>
<div>前景色<input id="Text2" type="text" /></div>
<input id="Button1" type="button" value="button" onclick="SetColor()"/>
</form>
</body>
</html>지침:
폼에 있는 버튼을 클릭하면 JavaScript가 CSS 페이지 스타일을 동적으로 변경하는 방법로 작성된 SetColor() 함수가 실행됩니다.
function SetColor(foreColor, backColor) {
target = document.getElementById("page");
if (target != null) {
target.style.backgroundColor = document.form1.Text1.value;;
target.style.color = document.form1.Text2.value;
}
}SetColor 함수에서 document.getElementById 메소드를 호출하여 Body 태그로 설정된 ID에서 Body 태그의 요소를 가져옵니다. Element(target! = Null)를 획득한 경우 Element의 style 속성 중 background 속성과 color 속성을 텍스트 상자의 값으로 설정할 수 있습니다.
실행 결과
HTML 파일을 실행합니다. 아래와 같은 효과가 표시됩니다.
텍스트 상자에 색상 코드를 입력한 후 "버튼" 버튼을 클릭하면 아래와 같은 효과가 나타납니다.
다른 색상의 코드를 입력한 후 버튼 버튼을 클릭하세요. 페이지가 다른 색상으로 변경됩니다
다음 예제로 넘어가겠습니다
코드는 다음과 같습니다
JavaScript가 CSS 페이지 스타일을 동적으로 변경하는 방법ChangeCssParameter.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function onLoad() {
param = GetQueryString();
target = document.getElementById("page");
if (param != null) {
if (param["bgcolor"] != null) {
target.style.backgroundColor = "#" + param["bgcolor"];
}
if (param["fgcolor"] != null) {
target.style.color="#"+ param["fgcolor"];
}
}
}
function GetQueryString() {
if (1 < document.location.search.length) {
// 获取不包括第一个字符的字符串（？符号）
var query = document.location.search.substring(1);
// 使用查询分隔符（＆）将字符串拆分为数组
var parameters = query.split('&');
var result = new Object();
for (var i = 0; i < parameters.length; i++) {
// 拆分为参数名称和参数值
var element = parameters[i].split('=');
var paramName = decodeURIComponent(element[0]);
var paramValue = decodeURIComponent(element[1]);
// 将参数添加到参数作为关联数组，参数名称为键
result[paramName] = decodeURIComponent(paramValue);
}
return result;
}
return null;
}
</script>
</head>
<body id="page">
<div>这是一个测试页面</div>
<div>啦啦啦啦</div>
<div>哈哈哈哈</div>
</body>
</html>설명:
이전 HTML 파일과 유사하지만 HTML 파일의 매개변수에서 색상 코드를 가져와 전경색과 배경색을 변경합니다.
실행 결과:
HTML 파일을 실행하면 아래와 같은 효과가 표시됩니다.
URL을 변경하고 URL 뒤에 "?Bgcolor=C0C0C0"을 추가하여 액세스하세요. 아래와 같은 효과가 표시됩니다. 배경색이 매개변수의 색상 코드 설정으로 변경되었습니다.
다음은 "?bgcolor=202020&fgcolor=00C000"의 결과입니다. 전경색도 변경됩니다.
위 내용은 이 기사의 전체 내용입니다. 더 관련 있고 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 JavaScript가 CSS 페이지 스타일을 동적으로 변경하는 방법 Video Tutorial 열로 이동하세요! ! ! !
위 내용은 JavaScript가 CSS 페이지 스타일을 동적으로 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!