js 改变div 里面的某个文字的颜色

JavaScript024

js 改变div 里面的某个文字的颜色,第1张

1、新建一个html文件，命名为test.html。

2、在test.html文件内，创建一个div模块，设置其class属性为bg，id属性为mydiv，用于下面设置css样式和获取div对象。

3、在test.html文件内，使用css设置div的样式，设置其宽度为500px，高度为272px，背景图片为2.jpg。

4、在test.html文件内，在div的下面创建一个button按钮，按钮名称为“更换背景颜色”。

5、给button按钮绑定onclick点击事件，当按钮被点击时，执行myfun()函数。

6、在test.html文件内，在js标签内，创建myfun()函数，在函数内，使用getElementById()方法通过id获得div对象，设置对象中的backgroundImage背景属性为另一张图片，从而实现改变div的背景图片。就完成了，运行就可以了。

要写select选中事件，根据选中改变背景或者CSS

<script src="jquery.min.js"></script>

<div id="div">这是一个文本框</div>

<select name="" class="select">

<option>选择颜色</option>

<option value="red">红色</option>

<option value="green">绿色</option>

<option value="yellow">黄色</option>

</select>

<script>

$('.select').change(function(event) {

var bgColor = $(this).val()

$("#div").css("background",bgColor)

})

</script>

动态渐变

<span style="font-size:12px"><html>

...

<body>

<center>

<div id="fade" style="width:600pxheight:200px"></div>

</center>

</body>

</html></span>

为了方便查看，使用内嵌样式，还是推荐使用外链样式的使用啊，接下来进行简单编写动态实现渐变效果

<span style="font-size:12px"><script type="text/javascript">

var node=document.getElementById("fade")

var color="#0000"

var level=1

window.load=function fading(){

node.style.background=color.+level.toString()+level.toString()

level++

if(level>16){

clearTimeOut(fading)

}else{

setTimeOut(fading,300)

}

}

<script></span>

静态渐变

在css样式中添加：

background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff))

简单解释下：

linear：这个就碰到了线性渐变和径向渐变的两个概念，无非是在一条线上进行变化的线性和像圆一样向四周扩散的径向；

后面的四个值：分别代表相应方向的px值，可以从左顺时针转的顺序记忆，但是它代表的是to，截止到的颜色

from：这就是开始的颜色了

to：和from是同时出现的，最后渐变结束的颜色

而color-stop：则是指在变化到线的哪个位置的时候会出现什么颜色，当然是从周围过渡过去的，相当于from，to过渡点，from过渡点，to；

附送下简单的其他的基本代码

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8)/*IE6*/

background:-moz-linear-gradient(left,#ffffff,#ff0000)/*非IE6的其它*/

background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff))/*非IE6的其它*/