用DOM让div产生不同的背景颜色

2024-11-04

DOM——事件详解

事件事件:触发-响应机制事件三要素事件源:触发(被)事件的元素事件名称: click 点击事件事件处理程序:事件触发后要执行的代码(函数形式) 事件的基本使用 var box = document.getElementById('box'); box.onclick = function() { console.log('代码会在box被点击后执行'); }; 案例点击按钮弹出提示框点击按钮切换图片事件详解注册/移除事件的三种方式 var box = documen

div 背景色设置_DIV背景颜色设置

DIV 背景色设置篇-div背景颜色设置篇一.div标签内直接设置背景颜色 - TOP <div style="background:#000; color:#FFF">背景为黑色</div> DIV标签内设置背景色为黑色,字体颜色为白色 div标签内设置背景色截图通过div标签内设置style设置背景色等CSS样式. 二.外部css设置div背景色 - TOP 这里为一个对象CSS命名为".divcss5",通过建立外部

div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）

原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. 大体结构 <div class="outer"> <div class="inner1"></div> <d

div不设置高度背景颜色或外边框不能显示的解决方法

在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在浏览时出现最外层Div的背景颜色和边框不起作用的问题. 大体结构<div class="outer"> <div class="inner1"></div> <div class="inner2"></div></div>css文件:(只写出了最主要的部分css代码:定义了最外层div

css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变

css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变代码: <style> .content_bg{ width:600px;max-width: 100%;margin: auto; height:150px; line-height:150px; text-align:center; font-size:32px;color:#fff; backgro

利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

实现背景色透明效果的代码实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rgba属性之间进行十六进制与十进制的换算. 增加对IE9浏览器中的滤镜取消效果 ★ 鉴于需要做浏览器的hack,使用了:root来让IE9以前的浏览器不支持效果,所以增加了一个需要添加选择符类名的方式,对于这块需要大家在后期添加样式到代码中做单独的处理把CSS代码中的backgroun

Chrome&FF&Opera&下DIV不设置高度显示背景颜色和边框的办法

今天在排版的时候,外层的div不写高度的话背景颜色和边框没法办法显示,但是在IE下面就可以,这个有三个解决办法. 第一: 直接给最外层的div设置高度(不推荐). 第二: 在内部每个div后添加一个清除浮动. <div> div class="outer"> <div class="inner1"></div> <div class="inner2"></div> <div

div没有设置高度时背景颜色不显示(浮动)

在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题.网上查找资料之后主要原因如下:由于在Firefox和opera中:如果里面的DIV是浮动的(float)而母体不会去计算子体float之后的height.而在 IE中支持这种计算,所以IE下正常. 解决方法: 给外部div直接设置高度(不推荐),因为很多时候我们并不知道外部div的高度,我们希望靠里

随机产生div背景颜色变化

使一个DIV在每次刷新后变化背景颜色,很容易想到JS的random()函数:通过每次刷新页面产生使背景rgb随机产生 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="copyright"> <title>随机变化背景色</title> <style> #div1 { width:200px;

ie11 div不显示背景颜色解决方案

我的一个场景就是,一个空的div,但是想加个背景颜色,方案就是在div加个空content,利用before属性加上背景<div class="hilan"></div> .hilan { position: relative; padding-right: 12px; } .hilan:before { content: ''; display: block; width: 6px; height: 6px; background: black; -webki

Easyui之datagrid实现点击单元格修改单元格背景颜色

前段时间有个需求中有点击datagrid的单元格实现某种事件,调用datagrid的onclickCell这个方法很容易实现,但是体验不好啊,完全不知道自己刚才点击的是哪个单元格,然后就尝试单击单元格的时候给改变单元格的颜色,经过一番折腾,最终实现该功能,然后写下来记录一下实现过程. 关于Easyui这里就不再多说,其是一组基于JQuery的UI插件的集合.其中datagrid估计是Easyui中最常用的一个插件了. 再介绍实现点击单元格修改单元格背景颜色之前,先来简单的介绍下datagrid的

兼容性背景颜色半透明CSS代码（不影响内部子元素）

如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#,endColorStr=#); 注意:startColorStr 和 endColorStr 的值,前两位是十六进制的透明度,后面六位是十六进制的颜色. 其格式为 #AARRGGBB . AA

css3动画之背景颜色的自动切换

因为不同浏览器内核的不同所以会产生浏览器兼容性问题 <!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>背景颜色的变换</title> <style type="text/css"> div{ width: 200px; height: 200px; background: blue; animation:myfirst 5s; -m

css3的背景颜色渐变@线性渐变

背景颜色渐变之线性渐变语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); opera浏览器 background: -o-linear-gradient(position/deg,startColor,endColor); safari和chrome浏览器 background: -webkit-linear-gradient(position/deg,startCo

html background 背景颜色美化类似毛玻璃

制作高大上背景颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{background-color: rgb(224, 192, 160); } #app{ height:100VH; background-image:url(&q

ie6背景透明的设置方法 ie6背景颜色透明和png图像透明解决方法

IE6浏览器,让我们又爱又恨.爱它的是,可以让我们写的代码的时候,可以更标准,恨的是,它有太多无厘头的IE6常见bug(详情点击),让我们焦头烂额.现在现在用百度浏览器调查,国内占有率不到6%了,但是,就怕碰到需要调兼容ie6的网站. 其中,一个IE6常见问题就是IE6透明背景问题了.透明背景主要分背景颜色透明和背景图片或者png图片透明问题. 一.IE6背景颜色透明一般浏览器,给一个盒子透明背景写法是 : opacity: 0.5; -moz-opacity: 0.5; -webkit

jquery动态改变背景颜色插件

GETHUB下载地址背景颜色用animate方法时时无法改变颜色的所以要使用插件进行补充. 用法: <!DOCTYPE html> <html> <head> <style> div { background-color: #bada55; width: 100px; border: 1px solid green; } </style> <script src="http://code.jquery.com/jquery-1

设置chrome浏览器背景颜色

经常看博客,页面背景都是白色的居多,看久了眼睛就不适合了,决定修改chrome浏览器背景颜色,保护下自己的眼睛, 下载chrome 插件Stylish并安装,安装成功后chrome右上角有它的图标,点击它再选择“管理已安装样式”,弹出管理页面,点击“写入新样式” 复制下面css代码保存背景颜色就变绿了 div {background-color:#C7EDCC !important;} table {background-color:#C7EDCC !important;} td {backgr

js获取背景颜色

//js获取背景颜色var Airport=$("#Airport").css('background-color'); js设置背景颜色 $("#intercity").css("background-color","#e8ebee");

js切换背景颜色

我将全部的代码上传到了github,你可以下载查看  <script> function color1(event) { var cubebody=document.getElementById('body_color'); cubebody.className = 'graydient1'; } function color2() { var cubebody=document.

jquery入门改动网页背景颜色

我们在浏览一些站点,尤其是一些小说站点的时候,都会有改动页面背景颜色的地方,这个功能使用jquery非常easy实现. 效果图: show you code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> <script src="jquery-1.11.1.min.js"&g

用DOM让div产生不同的背景颜色

热门专题