js 属性操作注意事项1

一、属性写法

我要点击 oBen2 按钮使p的字号加1

按照以往的思路，无非是拿到oP的style,改变它的font-size属性，如下
oP.style.font-size
但是JS中不允许出现'-'

所以 font-size ==> fontSize

css中的其他属性也是这么改，如padding-top ==> paddingTop

二、千万不要忘记写单位

例：

var num = 15;

oP.style.fontSize = num + 'px';

如果我们在js中想让一个值不停的变，就定义一个值，让他++ --；当然这个要视情况而定。

下边上一个点击按钮改变字体大小的小案例帮助理解

<title>js中的属性操作-注意</title>
</head>
<script>
window.onload = function(){
	var oBtn1 = document.getElementById("btn1");
	var oBtn2 = document.getElementById("btn2");
	var oP = document.getElementById("p1");
	
	var num = 15;
	
	oBtn1.onclick = function(){
		num --;
		oP.style.fontSize = num + 'px';
	};
	oBtn2.onclick = function(){
		num ++;
		oP.style.fontSize = num + 'px';
	};
	
};
</script>
<body>
<input type="button" value="-" id="btn1"/>
<input type="button" value="+" id="btn2"/>
<p id="p1" style="font-size:15px">
2016年圣诞前的一个星期天下午，我推开窗，加州明媚的阳光洒在街道上，四季如春的旧金山和风拂面。对面屋外草地上金发碧眼的孩子们正兴奋的跑着跳着，看着家长给圣诞树装扮上满满的礼物 。眺望不远处，是Twin Peaks上跑步健身的青年男女大秀好身材，悠扬的教堂钟声飘过几个街区声声入耳。那时我30出头，在硅谷一家企业软件公司做产品经理，工作轻松，生活惬意，却觉得少了些什么。我叫伟耘，是阿里云网络团队的产品运营。工作十年了，分享生命中的三个瞬间，留作纪念。
</p>
</body>

js 属性操作注意事项1

猜你喜欢