Javascript实例代码:点击设置网页背景

文章简介:根据选项设置背景颜色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【javascript每日一练】- 根据选项设置背景颜色</title>
        <script type="text/javascript">
        function setProperty()
                {
                        var content = document.getElementById("content");
                        var sel = document.getElementById("selectColor");
                        var propertyValue = sel.options[sel.selectedIndex].value;
                        content.style["background"] = propertyValue;
                }
        </script>
</head>

<body>
        <div id="content">
                <p>选择颜色后点击按钮"设置背景颜色"。</p>
                <select id="selectColor" >
                        <option value="aqua">aqua</option>
                        <option value="black">black</option>
                        <option value="blue">blue</option>
                        <option value="fuchsia">fuchsia</option>
                        <option value="gray">gray</option>
                        <option value="green">green</option>
                        <option value="lime">lime</option>
                        <option value="maroon">maroon</option>
                        <option value="navy">navy</option>
                        <option value="olive">olive</option>
                        <option value="purple">purple</option>
                        <option value="red">red</option>
                        <option value="silver">silver</option>
                        <option value="teal">teal</option>
                        <option value="white">white</option>
                        <option value="yellow">yellow</option>
                </select>
                <button onclick="setProperty(); return false;">设置背景颜色</button>
                <br />
                <br />
        </div>

</body>
</html>

今天写这个浪费了我很多时间,本来是很简单的一个小代码可我就是写不出效果来了。最后在百般无奈下我寻求sunylost大神的帮助,一语中的。
奉上之前错误代码,望各位避免。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【javascript每日一练】- 根据选项设置背景颜色</title>
        <script type="text/javascript">
        var content = document.getElementById("content");
        function setProperty()
                {
                        var sel = document.getElementById("selectColor");
                        var propertyValue = sel.options[sel.selectedIndex].value;
                        content.style["background"] = propertyValue;
                }
        </script>
</head>

<body>
        <div id="content">
                <p>选择颜色后点击按钮"设置背景颜色"。</p>
                <select id="selectColor" >
                        <option value="aqua">aqua</option>
                        <option value="black">black</option>
                        <option value="blue">blue</option>
                        <option value="fuchsia">fuchsia</option>
                        <option value="gray">gray</option>
                        <option value="green">green</option>
                        <option value="lime">lime</option>
                        <option value="maroon">maroon</option>
                        <option value="navy">navy</option>
                        <option value="olive">olive</option>
                        <option value="purple">purple</option>
                        <option value="red">red</option>
                        <option value="silver">silver</option>
                        <option value="teal">teal</option>
                        <option value="white">white</option>
                        <option value="yellow">yellow</option>
                </select>
                <button onclick="setProperty(); return false;">设置背景颜色</button>
                <br />
                <br />
        </div>

</body>
</html>

时间: 2024-07-30 13:27:07

Javascript实例代码:点击设置网页背景的相关文章

在页面中输出当前客户端时间javascript实例代码_javascript技巧

时间对象(Date())比较简单,本文旨在为初学者入门使用,大牛可略过! 本文承接基础知识实例,说一下实例的要求: 在页面中输出当前客户端时间(2015年1月1日星期一10:10:10这样的格式),每过一秒中页面不刷新,但是时间自动更新(用两种定时器方法都可以实现),鼠标点击时间,如果原先运动则停止,如果停止则继续运动: 要求基本上可分为2部分:一是不刷新自动更新时间,二是点击时间停止或更新时间 好,那我们还是老规矩,一步一步来,既然是时间,那就会用到时间对象 new Date(); var n

Javascript实例代码:通过鼠标点击给网页换CSS

文章简介:通过点击颜色块给网页更换自己喜欢的颜色. 通过点击颜色块给网页更换自己喜欢的颜色.代码如下: <script type="text/javascript">    var oDiv = document.getElementById('div1');    var oHlink = document.getElementById('hlink');    var aLi = oDiv.getElementsByTagName('li');    for(var l

设置网页背景透明代码

提示:您可以先修改部分代码再运行 提示:您可以先修改部分代码再运行

Javascript实例代码:JS控制DIV属性

文章简介:点击按钮改变DIV属性,通过点击不同的按钮设置DIV的样式. 点击按钮改变DIV属性,通过点击不同的按钮设置DIV的样式.代码如下: <script type="text/javascript">    var oBox = document.getElementById('box');    var oDiv = document.getElementById('div1');    var aInput = document.getElementsByTagN

Javascript实例代码:模拟登陆接收参数

文章简介:通过点击弹出按钮传递参数并弹出参数. 通过点击弹出按钮传递参数并弹出参数.代码如下: <script type="text/javascript"> var oBut = document.getElementById('oBut'); var aInput = document.getElementsByTagName('input'); oBut.onclick = function(){ //调用parameter函数并传参 parameter(aInput

Javascript实例代码讲解instanceof操作符

文章简介:在JavaScript中,我们可以用instanceof操作符来判断对象是否是某个类的实例,如果obj instaceof Class返回true,那么我们认为obj是Class的实例,obj要么由Class创建,要么由Class的子类创建. 在JavaScript中,我们可以用instanceof操作符来判断对象是否是某个类的实例,如果obj instaceof Class返回true,那么我们认为obj是Class的实例,obj要么由Class创建,要么由Class的子类创建.来自

Javascript实例代码:记住登陆密码的JS代码

文章简介:当鼠标经过checkbox显示提示框,离开则隐藏. 当鼠标经过checkbox显示提示框,离开则隐藏.代码如下: <script type="text/javascript">    var oTitle = document.getElementById('title');    var oInput = document.getElementsByTagName('input')[0];    //鼠标经过显示提示框    oInput.onmouseover

Javascript实例教程:点击传参方法和鼠标事件方法

文章简介:从这张开始就和大家说一些实用的效果的写法.当然首当其冲的就是我们可爱的TAB选项卡,用JQ写选项卡当然是很方便的而且方法也很多.其实用原生的JS写选项卡方法也很多. 从这张开始就和大家说一些实用的效果的写法.当然首当其冲的就是我们可爱的TAB选项卡,用JQ写选项卡当然是很方便的而且方法也很多.其实用原生的JS写选项卡方法也很多.下面我就写几个给大家看看一,点击传参方法<script>function tab(dom){var list = document.getElementByI

Javascript实例代码:固定居中效果

文章简介:终于可以抽出点时间再出一篇教程了.废话不多说了.今天这篇就教大家一个常用的效果.固定居中效果.其实这个应该不列入JS教程的范畴. 终于可以抽出点时间再出一篇教程了.废话不多说了.今天这篇就教大家一个常用的效果.固定居中效果.其实这个应该不列入JS教程的范畴.应为FF,IE6以上浏览器都支持fixed这个固定属性.唯独IE6不支持.所以我为了可恶的IE6.我这里就出一篇教程吧.而且这种效果也可以锻炼同学们的计算能力.以后很多效果都需要你的计算能力.哈哈 固定居中.或者固定在任何地方思想几