需求：点击页面的按钮，改变页面的颜色

思路：一先画出最简单的页面，二想办法获取页面的body节点，三想办法修改body节点的背景颜色属性，四通过一个方法获取随机的颜色值

简单的代码片段如下所示：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Change Page Color Script</title>

    <script>

        /*

          改变页面的背景颜色

        */

        function changePageColor()

        {

            //拿到body元素

            var bodyArray=document.getElementsByTagName("body");

            var body=bodyArray[0];

            //修改body元素的背景颜色属性

            body.setAttribute("bgcolor",getColorValue());

        }

        /*

          获取背景颜色的十六进制表示

        */

        function getColorValue()

        {

            return "#"+Math.round(Math.random()*1000000);

        }
    </script>

</head>

<body bgcolor="green" align="center">

    <input type="button" value="ChangePageColor" onclick="changePageColor();"/>

</body>

</html>

JS-改变页面的颜色（一）的更多相关文章

  1. 用JS改变页面中b标签的样式啊 样式的等

    用JS改变页面中b标签的样式啊 样式的等    ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效 <!DOCTYPE html> <html lang="en&qu ...

  2. selenium java ，执行js改变页面

    1.面对页面一些页面上的限制而导致某些选择按钮无法选中的问题 很多时候由于页面上的一些限制会导致我们无法无法正常用webdriver来实现我们手动的正常操作,这时候我们可以通过执行js来适当的改变页面 ...

  3. js 改变页面元素的内容

    改变页面标签里的内容 (方法) innerText innerHTML (常用)   代码示例 <div></div> <p> 我是文字 <span>1 ...

  4. JS-改变页面的颜色（二）

    需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值           和第一个例 ...

  5. JS-改变页面的颜色（三）

    需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值           和第二个例 ...

  6. js如何实现动态点击改变单元格颜色？

    js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...

  7. Color.js增强你对颜色的控制

    往逝之因 不要低头,皇冠会掉...  可你又没有皇冠 Color.js 增强你对颜色的控制 阅读目录 轻松管理颜色--color.js库 使用color.js Accessor Methods 你该知 ...

  8. config.js配置页面中的样式和图片路径

    这个文章用在什么地方,我先说一下,上周啊,我接到一个任务.因为公司业务要对接不同的银行,例如在工行下颜色是红色的,在其他银行下默认为蓝色,所以在页面一致的情况下,保证页面中的按钮和ICON是可以配置的 ...

  9. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

随机推荐

  1. js禁用回退键backspace解决办法

    本文摘自http://q821424508.iteye.com/blog/1587025 以下为2.0版本,支持IE,firefox,chrome[这三款浏览器经过测试]等浏览器 window.onl ...

  2. jQueryUI之交互

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. oracle 解锁表

    //查询锁表id select session_id from v$locked_object; //查询该ID的serial# SELECT sid, serial#, username, osus ...

  4. iOS学习之沙盒

    1.iOS沙盒 iOS应用程序只能在为该改程序创建的文件系统中读取文件,不可以去其它地方访问,此区域被成为沙盒,所以所有的非代码文件都要保存在此,例如图像,图标,声音,映像,属性列表,文本文件等. 1 ...

  5. 团队开发——冲刺2.a

    冲刺阶段二(第一天) 1.今天准备做什么? 收集游戏图片:开始.暂停.继续.重新开始.退出……为了界面的后期美工做准备. 2.遇到什么困难? 网上的图片很多,但是比较难找到统一风格的.

  6. MVC 3.0 Tree

    页面分左右两部分,左边是一个导航树,右边是局部页,点击树节点,异步刷新右边的内容.加颜色部分是知识点. @using VideoWeb.Models@model VideoWeb.Models.Cat ...

  7. C++嵌入Python，以及两者混用

    以前项目中是C++嵌入Python,开发起来很便利,逻辑业务可以放到python中进行开发,容易修改,以及功能扩展.不过自己没有详细的研究过C++嵌入python的细节,这次详细的研究一下.首先我们简 ...

  8. cut - 小巧的文本截取工具

    简介 cut命令是Unix下的一个命令行程序.cut命令是以行为单位来处理的.cut命令处理的是标准输入,所以可以结合管道来进行文本的处理. 命令格式 cut option… [file]… cut命 ...

  9. div弹出层的效果带关闭按钮

    下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .t ...

  10. IOS学习笔记34—EGOTableViewPullRefresh实现下拉刷新

    移动应用开发中有这么一种场景,就是在列表中显示的数据刷新,有点击刷新按钮刷新的,也有现在最流行的由Twitter首先推出的下拉刷新功能,在IOS中,使用下拉刷新更新UITableView中的数据也用的 ...