js_练习：字体的操作：样式的动态控制-CSDN博客

本文链接：https://blog.csdn.net/mtb278750/article/details/130593813
3 新闻字体

<html>
    <head>
        <title>js新闻字体</title>
        <meta charset="utf-8"/>
        <style type="text/css">
            div{
                border:1px solid blue;
                width:800px;
                margin:10px auto;
                padding:10px;
            }
            .cla1{
                background-color:#cccc00;
                border:1px solid blue;
            }
            #div5 div{
                width:50px;
                height:50px;
                float:left;
                margin:10px 60px;

            }
        </style>
    </head>
    <body>  
        <div  id="div1">
            动态的html:::Dynamic HTML
            DHTML由：html+css+js+dom解析
            html语言提供标签 封装数据
            css语言提供属性 控制样式
            js语言提供对象的逻辑判断 实现元素的动态效果
            dom技术：把html标签解析为对象
            html+css+js：：前段三剑客
            ajax=DHTML+ActiveXObject对象
            注意：内置对象的使用查询：dhtml的api
        </div>
        <div id="div2">
            文字大小：<input type="text" name="sizeText"/><br/>
            字体颜色：<input type="text" name="colorText"/><br/>
        </div>
        <script type="text/javascript">
            //事件：onblur 失去输入焦点
            //      onfocus 获取输入焦点
            //给<input type="text" name="sizeText"/>绑定输入完毕事件：
            var otext1=document.getElementsByName("sizeText")[0];
            var otext2=document.getElementsByName("colorText")[0];
            otext1.onfocus=function(){
                //更改样式：
                //otext1.style.backgroundColor="#cccccc";
                //otext1.style.border="1px solid blue";
                otext1.className="cla1";
            }
            otext2.onfocus=function(){
                otext2.className="cla1";//更改样式：
            }
            otext1.onblur=function(){
                //otext1.removeAttribute("style");//移除内部css样式  不能移除通选择器添加的样式
                otext1.removeAttribute("class");
                var fontSize=otext1.value;
                if(!fontSize){
                    fontSize=16;
                }
                document.getElementById("div1").style.fontSize=fontSize+"px";
            }
            otext2.onblur=function(){
                otext2.removeAttribute("class");
                var fontColor=otext2.value;
                if(!fontColor){
                    fontColor="#000000";
                }
                document.getElementById("div1").style.color=fontColor;
            }
        </script>

        <div id="div3">
            文字大小: 30px <input type="radio" name="radioFontSize" value="30px"/> | 
            40px <input type="radio" name="radioFontSize" value="40px"/> | 
            50px <input type="radio" name="radioFontSize" value="50px"/> | 
            60px <input type="radio" name="radioFontSize" value="60px"/> 
        </div>
        <script type="text/javascript">
            //改radioFontSize绑定点击事件
            window.onload=function(){
                var collFontSize=document.getElementsByName("radioFontSize");
                for(var i=0;i<collFontSize.length;i++){
                    collFontSize[i].onclick=function(){
                        document.getElementById("div1").style.fontSize=this.value;
                    }
                }
            }
        </script>

        <div id="div4">
            文字颜色: <select name="selectFontColor">
            <option value="red">红色</option>
            <option value="blue">蓝色</option>
            <option value="#ff00ff">紫色</option>
            <option value="yellow">黄色</option>
            <option value="black" selected="selected">黑色</option>
            </select>
        </div>
        <script type="text/javascript">
            //onchange;值更改事件
            window.onload=function(){
                var oSelect=document.getElementsByName("selectFontColor")[0];
                oSelect.onchange=function(){
                    //1:通过.value获取select的值
                    //document.getElementById("div1").style.color=this.value;
                    //2:获取所有的option 判断哪个option被选中  此option的值就是select的值
                    var collOptions=oSelect.getElementsByTagName("option");
                    for(var i=0;i<collOptions.length;i++){
                        if(collOptions[i].selected){
                            document.getElementById("div1").style.color=collOptions[i].value;
                            return;
                        }
                    }
                }
            }
        </script>
        <div id="div5" style="height:100px;">
            <div style="background-color:#aaaa00;"></div>
            <div style="background-color:#aa00aa;"></div>
            <div style="background-color:#00aaaa;"></div>
            <div style="background-color:#aaaaaa;"></div>			   
        </div>
        <script type="text/javascript">

            window.onload=function(){
                var collDiv=document.getElementById("div5").getElementsByTagName("div");
                for(var i=0;i<collDiv.length;i++){
                    //onclick事件
                    collDiv[i].onclick=function(){
                        document.getElementById("div1").style.backgroundColor=this.style.backgroundColor;
                    }
                    //onmouseover鼠标移入：
                    //onmouseout 鼠标移出
                    collDiv[i].onmouseover=function(){
                        document.getElementById("div1").style.backgroundColor=this.style.backgroundColor;
                    }
                    collDiv[i].onmouseout=function(){
                        document.getElementById("div1").style.backgroundColor="#ffffff";
                    }
                }
            }
        </script>
    </body>
</html>