js_javascript 기술에서 기사의 글꼴 크기를 변경하는 방법
- WBOY원래의
- 2016-05-16 15:21:051512검색
최근에 많은 친구들이 다음과 같이 질문하는 것을 발견했습니다. js를 사용하여 기사의 글꼴 크기를 변경하는 방법은 무엇입니까?
편집자가 관련 기사를 검토하고 참고하실 수 있도록 몇 가지 작은 사례를 정리했습니다.
렌더링:
크고 작은 버튼을 클릭하면 언제든지 글꼴 크기를 변경할 수 있습니다
특정 코드:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用js如果改变一篇文章字体的大小</title>
</head>
<style type="text/css">
a{ text-decoration:none; color:#0C3}
a:hover{ color:#F36}
</style>
<body>
<script>
function changesize(size)
{
document.getElementById("article_content").style.fontSize =size+"px";
}
</script>
<div id="article_content">脚本之家<br/>脚本之家欢迎您<p>好好学习 天天向上</div>
<a href="javascript:changesize('20')">大</a> <a href="javascript:changesize('12')">小</a>
</body>
</html>
또 다른 밤을 알려드리겠습니다.
작동 원리는 매우 간단합니다. 이벤트가 발생하면 기사의 글꼴 크기를 변경하는 것입니다. 보다 간단하게는 글꼴 크기 속성의 값을 변경하는 것입니다(jQuery 버전 1.7.2).
HTML
<div class="box">
<div class="ctrl">
<a href="javascript:;">放大</a>
<a href="javascript:;">缩小</a>
<a href="javascript:;">默认</a>
</div>
<div class="cont">这里是一些文字</div>
</div>
CSS
.box{text-align:center;}
.ctrl{padding:50px 0px 0px 0px;background:#f4f4f4;font-size:0px;border-bottom:3px solid #333;}
.ctrl a{display:inline-block;width:50px;height:30px;line-height:30px;background:#333;color:#fff;font-size:14px;}
.ctrl a:hover{background:#444;color:#fff;font-weight:700;text-decoration:none;}
.cont{padding-top:50px;font-size:14px;}
JS
$(function(){
function sizeIn(){
var sizeCont = parseInt($(".cont").css("fontSize")); // 获取原设定的font-size的值
if(sizeCont == 30){ // 判断font-size增大到30像素时停止
$(".cont").css({fontSize:sizeCont});
}else{
$(".cont").css({fontSize:sizeCont + 1});
}
}
function sizeOut(){
var sizeCont = parseInt($(".cont").css("fontSize"));
if(sizeCont == 10){ // 判断font-size减小到10像素时停止
$(".cont").css({fontSize:sizeCont});
}else{
$(".cont").css({fontSize:sizeCont - 1});
}
}
function sizeDefault(){
$(".cont").css({fontSize:""})
}
$(".ctrl a").click(function(){
if($(this).index() == 0){
sizeIn();
}else if($(this).index() == 1){
sizeOut();
}else{
sizeDefault();
}
})
});
이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.