Javascript操作div颜色的改变

<!DOCTYPE html>
<html>
<head>
<title>this is javascript</title>
<style type="text/css">
#div1{background: aqua;
      height:200px;
      width:200px;
     }
</style>
<script type="text/javascript">
    function setcolor(color){
    var node=document.getElementById(‘div1‘);
        node.style.background=color;
    }
    setcolor(‘green‘);
    setcolor(‘red‘);
    setcolor(‘black‘);
</script>
</head>
<body>
<input type="button" value="变绿" onclick="setcolor(‘green‘)">
<input type="button" value="变红" onclick="setcolor(‘red‘)">
<input type="button" value="变黑" onclick="setcolor(‘black‘)">
<div id="div1"></div>
</body>
</html>

//比较一下两段代码示例

<!DOCTYPE html>
<html>
<head>
<title>this is javascript</title>
<script type="text/javascript">
function toGreen(){
var node=document.getElementById(‘div1‘);
    node.style.background="green";
        }
function toRed(){
var node=document.getElementById(‘div1‘);
    node.style.background="red";
        }
function toBlack(){
var node=document.getElementById(‘div1‘);
    node.style.background="black";
        }
</script>
<style type="text/css">
#div1{width:200px;
      height:200px;
      background: red;
  }
</style>
</head>
<body>
<input type="button" value="变绿" onclick="toGreen()">
<input type="button" value="变红" onclick="toRed()">
<input type="button" value="变黑" onclick="toBlack()">
<div id="div1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>this is javascript</title>
<style type="text/css">
#div1{width:200px;
  height:200px;
  background: red;
  }
</style>
<script type="text/javascript">
function totype(name,value){
var node=document.getElementById(‘div1‘);
    node.style[name]=value;
    }
totype(‘width‘,‘300px‘);
totype(‘height‘,‘400px‘);
totype(‘background‘,‘aqua‘);
</script>
</head>
<body>
<input type="button" value="变宽" onclick="totype(‘width‘,‘300px‘)">
<input type="button" value="变高" onclick="totype(‘height‘,‘400px‘)">
<input type="button" value="变蓝" onclick="totype(‘background‘,‘aqua‘)">
<div id="div1"></div>
</body>
</html>
时间: 2024-10-17 05:25:04

Javascript操作div颜色的改变的相关文章

JS动态,有选择性的改变div颜色

JS代码: <script language="javascript">function check(value){document.getElementById(value).style.background= "black";}</script> div处部分代码: <div id="1" style=" color:#FFF; width:40px; height:40px; float:left;

checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中

 checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { display: inline-block; width: 100px; margi

javascript操作html元素CSS属性

下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

javascript 操作DOM

一.document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> 我是第一个P</p> <p id="p2"> 我是第二个P</p> </div> window.onload = function () { var str = document.getElementById("p1").i

JavaScript 操作Dom对象

1)JavaScript  操作DOM對象 1.DOM:是Document  Object  Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 CSS-DOM 1.DOM Core DOM Core 不是JavaScript的专属品,任何一种支持DOM的编辑器语言都可以使用它 它的用途不仅限于处理一种使用标记语言编写出来的文档如HTML文档 getElementById()/getElementByTagName()等方法都是 DOM C

Javascript操作DOM常用API总结

Javascript操作DOM常用API总结 原文地址:http://luopq.com/2015/11/30/javascript-dom/ 类型 Node类型(ELEMENT_NODE:1 ATTRIBUTE_NODE:2 TEXT_NODE:3 COMMENT_NODE:8``DOCUMENT_NODE:9 DOCUMENT_FRAGMENT_NODE:11) 节点创建型(createElement createTextNode cloneNode createDocumentFragme

javascript操作DOM方法整理

原自本人整理,主要来源于这里.大家如果有补充,十分欢迎大家留言. 一.获取节点 document.getElementById();//id="" document.getElementsByName();//name="" document.getElementsByTagName();//"input" document.getElementsByClassName();//class="" 二.css选择器 docume

Python javascript操作DOM

文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容.这里我们主要是讲用javascript操作DOM. 1. 查找元素 1.1 直接查找 document.getElementById 根据ID获取一个标签 document.getElem

javascript操作多选下拉列表

闲来无事,把javascript操作多选下拉列表有关的操作知识复习了一遍,代码附上 <%-- Created by IntelliJ IDEA. User: Administrator Date: 2014/8/9 Time: 18:05 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" lang