div添加change事件（css点击时背景变色，变蓝色怎样写）

本文目录

• css点击时背景变色，变蓝色怎样写
• Javascript jquery 四个div，点击变换不同颜色，如果颜色全部变执行某个函数
• 下拉框触发change事件div内容对应改变且保留div里的点击事件，以下代码只要触发change事件点击事件就没用
• 怎么点击一个div改变另一个div的样式，再点击变回来

css点击时背景变色，变蓝色怎样写

1、在html中定义一个dom元素，比如div。

2、给div添加一个onclick事件，同时定义一个响应事件的js函数。

3、在js函数中获取该div元素,通过document.getElementById()方法

4、通过元素的style属性中backgroundColor属性即可修改背景色。

示例：

//刚开始默认颜色白色

《div id="mydiv" style="width:200px;height:200px;border:1px solid black;" onclick="changeBackground();"》《/div》

js函数：

《script type="text/javascript"》
function changeBackground(){
    var mydiv = document.getElementById(’mydiv’);
    mydiv.style.backgroundColor="blue";
  }
《/script》

Javascript jquery 四个div，点击变换不同颜色，如果颜色全部变执行某个函数

《script》
$(document).ready(function () {
$("#red").on("click", function () {
$(this).css("background-color", "red");
$("#body").trigger("changeColorEvent" );
});
$("#green").on("click", function () {
$(this).css("background-color", "green");
$("#body").trigger("changeColorEvent");
});
$("#blue").on("click", function () {
$(this).css("background-color", "blue");
$("#body").trigger("changeColorEvent");
});
$("#yellow").on("click", function () {
$(this).css("background-color", "yellow");
$("#body").trigger("changeColorEvent");
});

$("#body").on("changeColorEvent", function (event) {
var number = parseInt($("#changeNumber").val()) + 1;
if (number == 4) {
$("div").removeAttr("style");
$("#changeNumber").val(0);
} else {
$("#changeNumber").val(number);
}

});
});
《/script》
《div id="body"》
《div id="red"》1《/div》
《div id="green"》2《/div》
《div id="blue"》3《/div》
《div id="yellow"》4《/div》
《/div》
《input type="hidden" id="changeNumber" value="0" /》
-------------------------------------
$("div").removeAttr("style"); 这段可以改成你想要的代码

下拉框触发change事件div内容对应改变且保留div里的点击事件，以下代码只要触发change事件点击事件就没用

说明你写错功能了。。
《table》
《tr》
《td》此处值通过js设置：《/td》
《td》《input id="jsUserName" type="text" name="jsUserName" readonly/》《/td》
《/tr》
《tr》
《td》此处输入值：《/td》
《td》《input id="userName" type="text" name="userName"/》《/td》
《/tr》
《/table》
《table》
《tr》
《td》此处值通过js设置：《/td》
《td》《input id="jsUserName" type="text" name="jsUserName" readonly/》《/td》
《/tr》
《tr》
《td》此处输入值：《/td》
《td》《input id="userName" type="text" name="userName"/》《/td》
《/tr》
《/table》
JavaScript代码：
view plaincopy to clipboardprint?
$(function()
{
var jsUserName = "";
if($.browser.msie) // IE浏览器
{
$("#userName").get(0).onpropertychange = setJsUserName;
$("#jsUserName").get(0).onpropertychange = handle;
}
else // 其他浏览器
{
var intervalName; // 定时器句柄
$("#userName").get(0).addEventListener("input",setJsUserName,false);

// 获得焦点时，启动定时器
$("#userName").focus(function(){
intervalName = setInterval(handle,1000);
});
// 失去焦点时，清除定时器
$("#userName").blur(function()
{
clearInterval(intervalName);
});
}

// 设置jsUserName input的值
function setJsUserName()
{
$("#jsUserName").val($(this).val());
}

// jsUserName input的值改变时执行的函数
function handle()
{
// IE浏览器此处判断没什么意义，但为了统一，且提取公共代码而这样处理。
if($("#jsUserName").val() != jsUserName)
{
$("#toolTip").remove();
$("#jsUserName").parent().append("《span id=’toolTip’》看到这里的信息表明，通过js改变input的值也能响应相应事件：《span style="color:red;" mce_style="color:red;"》" + $("#jsUserName").val() + "《/span》《/span》");
jsUserName = $("#jsUserName").val();
}
}
});
$(function()
{
var jsUserName = "";
if($.browser.msie) // IE浏览器
{
$("#userName").get(0).onpropertychange = setJsUserName;
$("#jsUserName").get(0).onpropertychange = handle;
}
else // 其他浏览器
{
var intervalName; // 定时器句柄
$("#userName").get(0).addEventListener("input",setJsUserName,false);

// 获得焦点时，启动定时器
$("#userName").focus(function(){
intervalName = setInterval(handle,1000);
});
// 失去焦点时，清除定时器
$("#userName").blur(function()
{
clearInterval(intervalName);
});
}

// 设置jsUserName input的值
function setJsUserName()
{
$("#jsUserName").val($(this).val());
}

// jsUserName input的值改变时执行的函数
function handle()
{
// IE浏览器此处判断没什么意义，但为了统一，且提取公共代码而这样处理。
if($("#jsUserName").val() != jsUserName)
{
$("#toolTip").remove();
$("#jsUserName").parent().append("《span id=’toolTip’》看到这里的信息表明，通过js改变input的值也能响应相应事件：《span style="color:red;" mce_style="color:red;"》" + $("#jsUserName").val() + "《/span》《/span》");
jsUserName = $("#jsUserName").val();
}
}
});

怎么点击一个div改变另一个div的样式，再点击变回来

思路，定义一个类on 里面属性是transform:rotete(-45deg);
当点击a的时候判断b是否有on这个类 如果有移除 如果没有添加。基本代码如下，仅供参考
《!DOCTYPE html》
《html》
《head》
《meta charset="utf-8"》
***隐藏网址***
《title》Examples《/title》
《meta name="description" content=""》
《meta name="keywords" content=""》
《link href="" rel="stylesheet"》
《style》
.a{width: 50px;height: 50px;border: 1px solid red;position: relative;}
.b{width: 20px;height: 20px;background: skyblue;transition: all 0.5s;position: absolute;top: 50%;left: 50%;margin-top: -10px;margin-left: -10px;}
.on{transform: rotate(-45deg);}
《/style》
《/head》
《body》
《div class="a"》
《div class="b"》《/div》
《/div》
《script》
let oA = document.querySelector(’.a’);
let oB = document.querySelector(’.b’);
oA.onclick = ()=》{
if(oB.classList.contains(’on’)){
oB.classList.remove(’on’);
}else{
oB.classList.add(’on’);
}
}
《/script》
《/body》
《/html》