码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-04-11 11:45:55      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

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

<!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)

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

标签:

原文地址:http://www.cnblogs.com/bokebi520/p/4417219.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!