文字变大变小，详情页比较常见的那种
<!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="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）