자바스크립트에서 글꼴 효과를 설정하는 방법-JS 튜토리얼-php.cn

자바스크립트에서 글꼴 효과를 설정하는 방법

醉折花枝作酒筹

풀어 주다： 2021-06-10 10:12:14

원래의

3611명이 탐색했습니다.

자바스크립트에서는 스타일 속성을 사용하여 글꼴 효과를 설정할 수 있으며 구문 형식은 "object.style.property=property value"입니다. Style 객체는 단일 스타일 선언을 나타냅니다. 스타일 개체는 스타일이 적용되는 문서나 요소에서 액세스할 수 있습니다.

자바스크립트에서 글꼴 효과를 설정하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function over(obj){
	obj.style.backgroundColor="blue";
	obj.style.color="white";
}
function out(obj){
	obj.style.backgroundColor="";
	obj.style.color="";
}
function win(){
	p1.style.fontWeight="Bold";//粗体
	p2.style.fontStyle="Italic";//斜体
	p3.style.textDecoration="underline";//下划线
	p4.style.textDecoration="line-through";//删除线
}
function qs(){
	p1.style.fontWeight="normal";
	p2.style.fontStyle="normal";
	p3.style.textDecoration="none";
	p4.style.textDecoration="none";
}
</script>
</head>
<body οnlοad="win();">
<table border="1" cellspacing="0" width="234" height="77">
<tr align="center" id="t1" οnmοusemοve="over(this);" οnmοuseοut="out(this);">
<td width="52"> </td>
<td width="65">商品</td>
<td width="95">价格（元）</td>
</tr>
<tr align="center" id="t2" οnmοusemοve="over(this);" οnmοuseοut="out(this);">
<td>A 商场</td>
<td>S 商品</td>
<td>100</td>
</tr>
<tr align="center" id="t3" οnmοusemοve="over(this);" οnmοuseοut="out(this);">
<td>B 商场</td>
<td>S 商品</td>
<td>80</td>
</tr>
</table>
<p id="p1">阿帕奇</p>
<p id="p2">阿帕奇</p>
<p id="p3">阿帕奇</p>
<p id="p4">阿帕奇</p>
<p id="p5" οnmοusemοve="qs();">鼠标移到此处撤销 阿帕奇样式</p>
<p id="p6">阿帕奇</p>
</body>
</html>

로그인 후 복사

많은 경우 웹페이지 요소의 스타일을 동적으로 수정해야 합니다. JavaScript는 스타일을 동적으로 수정하는 여러 가지 방법을 제공하며 해당 방법의 사용, 효과 및 결함은 아래에 소개됩니다.

1. 스타일 시트의 클래스 이름을 수정하려면 obj.className을 사용하세요.

2. 임베디드 CSS를 수정하려면 obj.style.cssTest를 사용하세요.

3. 스타일 시트의 클래스 이름을 수정하려면 obj.className을 사용하세요.

4. 외부 CSS 파일을 사용하여 요소의 CSS를 변경하세요

[추천 학습: javascript 고급 튜토리얼]

위 내용은 자바스크립트에서 글꼴 효과를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!