您的位置：首页 > Web前端 > JavaScript

javascript基础——文字变大变小className的使用及JS浮动的兼容用法

2015-04-11 11:12 411 查看

文字变大变小，详情页比较常见的那种

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字放大缩小及className的使用</title>
<style>
#p1{ width: 960px;}
.red ,.green{ width:400px; border:5px solid #333; background:#eee; padding:20px;}
.red { color:red; }
.green{ color: green; }
</style>
</head>
<script>
/*
JS 不允许出现"-"
padding-top        paddingTop
margin-left        marginLeft
*/
window.onload = function(){

// 获取元素
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBtn3 = document.getElementById('btn3');
var oBtn4 = document.getElementById('btn4');
var oP = document.getElementById('p1');
// 给文字大小定义一个初始值，保存在变量num中
var num = 16;

// 文字变小
oBtn1.onclick = function(){

　　　　　　　　if(num >= 12){
　　　　　　　　　　num --;
　　　　　　　　　　oP.style.fontSize = num + 'px';
　　　　　　　　}

};

// 文字放大
oBtn2.onclick = function(){

　　　　　　　　if(num <= 20){
　　　　　　　　　　num ++;
　　　　　　　　　　oP.style.fontSize = num + 'px';
　　　　　　　　}

};

// 文字变红
oBtn3.onclick = function(){
oP.className = 'red';
};

// 文字变绿
oBtn4.onclick = function(){
oP.className = 'green';
};
};
</script>
<body>
<input type="button" value="-" id="btn1">
<input type="button" value="+" id="btn2">
<input type="button" value="变红" id="btn3">
<input type="button" value="变绿" id="btn4">
<p id="p1" style="font-size:14px;">这10件事，帮助那些成功人士成为社会上最能赚钱的那20%。1.他们回顾自己的一天 2.他们会写下他们的想法 3.他们深入阅读 4.他们为第二天早上的事儿设置优先级 5.他们花时间和家人在一起 6.他们把事情做好 7.他们避免数字化成瘾 8.他们花时间亲近自然 9.他们冥想 10.他们想象未来 如果你能研究成功人士的这十个好习惯，你的生产力会在一夜之间提高，你的生活就会变得更好。那么，你准备在睡觉前实践哪个好习惯呢？</p>
</body>
</html>

注意：

1）JS 在设置样式时，不允许出现"-"。(如：font-size 就得写成fontSize，类似驼峰命名法)

2）给元素添加class时用的是className而不是class，这点得注意，因为class是JS里的保留字，是不允许用的，否则就会报错！

JS浮动的兼容性用法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS浮动的用法</title>
</head>
<body>
<script>
/*
oDiv.style.float = 'right';                //float是javascript保留字不可用

oDiv.style.styleFloat = 'right';        // IE
oDiv.style.cssFloat = 'left';            // 非IE

IE（styleFloat）
非IE（cssFloat）

<div class="right"></div>
*/
window.onload = function(){

// 获取元素
var oDiv = document.getElementById('div1');

oDiv.style.styleFloat = 'right';  //兼容ie6~8
oDiv.style.cssFloat = 'right';      //兼容标准浏览器以及ie9以上
};
</script>

<div id="div1" style="width:100px; height:100px; border:1px solid #ccc;"></div>
</body>
</html>

注意：

oDiv.style.float = 'right'; 这么写是不对的，因为float是javascript保留字不可用

兼容性的写法是：

oDiv.style.styleFloat = 'right';　　 // IE
oDiv.style.cssFloat = 'right';　　 // 非IE

这么去记忆：

IE（styleFloat）

非IE（cssFloat）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航