文章分类
HTML/CSS Flash教程 Fireworks教程 Dreamweave JavaScript 网站推广 网页理论 其他教程 视频教程
 产品搜索
关键字: 分类:

整站搜索:
最新更新资源:
海量设计素材
韩国网页设计模板
高清PSD素材库
Flash网站模板
设计素材图库:
婚纱影楼模板
韩国卡通图库
VIS模板
版式画册模板

最新素材图库



当前位置:首页 >> 网页教程>> JavaScript >> javascript实例代码:点击设置网页背景

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


作者: 佚名 来源:网络 浏览:1 日期:2012-6-4 23:42:55

网页制作Webjx文章简介:根据选项设置背景颜色。

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


上一篇:javascript教程:令人迷惑的关键字this 下一篇:javascript实例教程:共享onload事件
【关闭窗口】 【返回顶部】返回网页教程】 【返回JavaScript

相关推荐文章

制作Web电子表格的j..

滑动导航菜单的变体使用

jQuery 1.4官..

jQuery+CSS制..

出色的jQuery导航..

Webjx收集10个优..

jQuery实现搜索关..


关于本站 | 广告服务 | 联系我们 | 站长微博 | 活动支持 | 友情链接 | 投稿热线 | 网站地图
版权所有 Copyright@ 2005 设计路上 QQ技术讨论群 24980615(已满) 5204059(已满) 4337615(已满)
业务联系Email:huchuangwu@hotmail.com 粤ICP备05029101号