day03：样式操作

一、点击按钮修改性别

<input type="button" id="btn" value="修改性别">
<input type="radio" name="sex">男
<input type="radio" name="sex" id="radio1" checked>女
<input type="radio" name="sex">保密
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        document.getElementById("radio1").checked=true;//表示被选中

    }
    //false：0 "" NaN undefined null
</script>

<input type="button" value="选择爱好" id="btn">
    <input type="checkbox" bame="like" id="cg">唱歌
    <input type="checkbox" bame="like" id="dd">打豆豆
    <input type="checkbox" bame="like" id="ball">打球
    <input type="checkbox" bame="like" id="dance">跳舞
    <script>
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            document.getElementById("cg").checked=true;
            document.getElementById("dd").checked=true;
            document.getElementById("ball").checked=true;
            document.getElementById("dance").checked=true;
        }
    </script>

二、点击按钮设置样式

<input type="button" value="设置样式" id="btn">
<div id="dv"></div>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        document.getElementById("dv").style.width="300px";
        document.getElementById("dv").style.height="300px";
        document.getElementById("dv").style.backgroundColor="pink";
        /*  dv.style.width="300px";
        dv.style.height="300px";
        dv.style.backgroundColor="pink"; */
    }
</script>

三、点击按钮选择下拉菜单

<input type="button" value="选择菜单" id="btn">
<select name="city" id="">
    <option value="北京">北京</option> 
    <option value="上海">上海</option> 
    <option value="广州" id="gz">广州</option> 
    <option value="深圳">深圳</option> 
</select>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        var gz=document.getElementById("gz");
        gz.selected=true;
    }
</script>

四、一个按钮实现显示和隐藏

<style>
    #dv{
        width: 300px;
        height: 200px;
        background: hotpink;
    }
</style>
<input type="button" value="隐藏" id="btn">
<div id="dv"></div>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        if(this.value=="隐藏"){
            document.getElementById("dv").style.display="none";
            this.value="显示";
        }else if(this.value=="显示"){
            document.getElementById("dv").style.display="block";
            this.value="隐藏";
        }
    }
</script>

五、优化设置样式的案例

<style>
    .cls{
        width: 300px;
        height: 200px;
        background: hotpink;
    }
</style>
<input type="button" value="设置样式" id="btn">
<div id="dv"></div>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        //在js中操作DOM元素时，设置类样式用className
        document.getElementById("dv").className="cls";
    }
        // 注意：.className = "cls" cls前面不要加点
</script>

六、隐藏显示的扩展

<style>
    div{
        width: 300px;
        height: 200px;
        background: pink;
    }
    .cls{
        display: none;/*这个类是隐藏的意思*/
    }
</style>
<input type="button" value="隐藏" id="btn">
<div id="dv"></div>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        if(document.getElementById("dv").className != "cls"){
        //if条件的括号里表示这个类不存在
            document.getElementById("dv").className = "cls";
            this.value = "显示";
        }else{
            document.getElementById("dv").className = "";
            this.value = "隐藏";
        }
    }
</script>

七、网页开关灯

<style>
    .cls{
        background: black;
    }
</style>
<input type="button" value="开/关灯" id="btn">
<script>
    //获取body标签 document.body 就能拿到body标签
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        //获取body标签 document.body
        document.body.className=document.body.className != "cls"?"cls":"";
        //三元运算符
    }
</script>

八、点击按钮禁用文本框

<input type="button" value="禁用文本框" id="btn">
<input type="text" value="点击来修改我啊" id="txt">
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        document.getElementById("txt").disabled=true;
    }
</script>

九、点击按钮修改列表背景颜色

<input type="button" value="改变背景颜色" id="btn">
<ul id="uu">
    <li>詹姆斯</li>
    <li>科比</li>
    <li>安东尼</li>
    <li>库里</li>
    <li>霍华德</li>
</ul>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        document.getElementById("uu").style.backgroundColor="hotpink";
    }
</script>

十、阻止a链接跳转

<a href="http://www.baidu.com" id="ak">百度</a>
<script>
    var ak=document.getElementById("ak");
    ak.onclick=function(){
        alert("已阻止跳转");
        return false;
    }
</script>

十一、点击小图变大图

<a href="images/1.jpg" id="ak"><img src="images/1-small.jpg"></a>
<img src="" alt="" id="big">
<script>
    var ak=document.getElementById("ak");
    ak.onclick=function(){
        document.getElementById("big").src=this.href;
        return false;
    }
</script>

十二、美女相册模板

<style>
    body {
        font-family: "Helvetica", "Arial", serif;
        color: #333;
        background-color: #ccc;
        margin: 1em 10%;
    }

    h1 {
        color: #333;
        background-color: transparent;
    }

    a {
        color: #c60;
        background-color: transparent;
        font-weight: bold;
        text-decoration: none;
    }

    ul {
        padding: 0;
    }

    li {
        float: left;
        padding: 1em;
        list-style: none;
    }

    #imagegallery {

        list-style: none;
    }

    #imagegallery li {
        margin: 0px 20px 20px 0px;
        padding: 0px;
        display: inline;
    }

    #imagegallery li a img {
        border: 0;
    }
</style>
<h2>
    美女画廊
</h2>

<ul id="imagegallery">
    <li><a href="images/1.jpg" title="美女A">
        <img src="images/1-small.jpg" width="100" alt="美女1"/>
    </a></li>
    <li><a href="images/2.jpg" title="美女B">
        <img src="images/2-small.jpg" width="100" alt="美女2"/>
    </a></li>
    <li><a href="images/3.jpg" title="美女C">
        <img src="images/3-small.jpg" width="100" alt="美女3"/>
    </a></li>
    <li><a href="images/4.jpg" title="美女D">
        <img src="images/4-small.jpg" width="100" alt="美女4"/>
    </a></li>
</ul>


<div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>
<script>
    // 从ul标签中获取所有的a标签
    var aObjs = document.getElementById("imagegallery").getElementsByTagName("a");//集合--伪数组
    //循环遍历
    for(var i = 0; i < aObjs.length; i++){
        // 为每个a链接添加点击事件
        aObjs[i].onclick = function(){
            // alert("123")要学会测试代码
            // 获取id为image的标签src 赋值  this.href
            document.getElementById("image").src = this.href;
            // 获取 id 为des的修改文字 innerText
            document.getElementById("des").innerText = this.title;
            return false;
        }
    }

</script>