이 예제는 h1, h2, p의 텍스트 크기를 변경하는 것입니다.
전체 페이지 텍스트를 변경할 수있는 "body"의 텍스트 크기를 변경할 수있는 방법이 javascript / css에 있습니까?
$(document).ready(function() {
$("#small").click(function(event) {
event.preventDefault();
$("h1").animate({
"font-size": "24px"
});
$("h2").animate({
"font-size": "16px"
});
$("p").animate({
"font-size": "12px",
"line-height": "16px"
});
});
$("#medium").click(function(event) {
event.preventDefault();
$("h1").animate({
"font-size": "36px"
});
$("h2").animate({
"font-size": "24px"
});
$("p").animate({
"font-size": "16px",
"line-height": "20px"
});
});
$("#large").click(function(event) {
event.preventDefault();
$("h1").animate({
"font-size": "48px"
});
$("h2").animate({
"font-size": "30px"
});
$("p").animate({
"font-size": "20px",
"line-height": "20px"
});
});
$("a").click(function() {
$("a").removeClass("selected");
$(this).addClass("selected");
});
});* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
body {
background: #e7e7e7;
}
#wrapper {
width: 400px;
margin: 0 auto;
padding: 40px;
background: #fff;
box-shadow: 0 0 50px 0 rgba(0, 0, 0, .25);
}
#controls {
float: right;
padding: 2px;
width: 25px;
background: #333;
position: fixed;
margin: 0 0 0 440px;
text-align: center;
transition: .25s ease-out;
}
#controls a {
font-size: 24px;
color: #aaa;
display: block;
font-weight: bold;
padding: 5px;
}
#controls a:hover {
color: #fff;
background: #000;
transition: .25s ease-out;
}
a.selected {
background-color: #294C52;
color: #fff !important;
}
#small {
font-size: 10px !important;
}
#medium {
font-size: 16px !important;
}
#large {
font-size: 20px !important;
}
.small {
font-size: 75%;
}
h1 {
font-size: 36px;
font-weight: bold;
}
h2 {
font-size: 24px;
margin: 10px 0;
}
p {
font-size: 14px;
line-height: 20px;
}<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<body>
<div id="wrapper">
<div id="controls">
<a href="#" id="small">A</a>
<a href="#" id="medium" class="selected">A</a>
<a href="#" id="large">A</a>
</div>
<h1>Header</h1>
<h2>Subheader</h2>
<p>Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id.</p>
</div>
</body>기본 글꼴 크기를 변경하기 위해 본문에 CSS 및 추가 클래스를 사용하는 것이 더 편리할까요? 이러한 클래스와 관련하여 JavaScript / JQuery 코딩없이 다른 요소의 크기를 변경할 수도 있습니다.
HTML
<button class="js-font" data-size="big">Bigger</button>
<button class="js-font" data-size="normal">Normal</button>
<button class="js-font" data-size="small">Smaller</button>
CSS
body, body.normal {
font-size: 16px;
}
body.big {
font-size: 36px;
}
body.small {
font-size: 12px;
}
JQuery
$(function() {
$('.js-font').on('click', function() {
$('body')
.attr('class', '')
.addClass($(this).data('size'));
});
});
바이올린 참조 http://jsfiddle.net/shurshilin/94cnutdr/
홉, 당신을 도울 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다