var colors = ['yellow', 'green', 'blue'];
//问题1
$('[class^="box"]').each(function (i, dom) {
1.$(dom).css('color', 'blue')
2.console.log($(dom).css('color')); //rgb(0, 0, 255)
3.console.log(dom.style.color); //blue
4.console.log(i); //0
5.console.log(dom); //<div class="box1" style="background-color: red; color: yellow;">red</div>
6.$(dom).css('color', colors[i]);
7.console.log(dom); //<div class="box1" style="background-color: red; color: yellow;">red</div>
8.console.log(dom.style.color); //yellow
}
)
//问题2
console.log($(dom).css('color')); //rgb(0, 0, 0)
0.console.log(dom); //<div class="box1" style="background-color: red; color: yellow;">red</div>
1.console.log(dom.style.color); //无结果
2.console.log(i); //0
3.console.log(dom); //<div class="box1" style="background-color: red; color: yellow;">red</div>
4.$(dom).css('color', colors[i])
5.console.log(dom); //<div class="box1" style="background-color: red; color: yellow;">red</div>
6.console.log(dom.style.color); //yellow
回调函数执行一次的运行结果见备注,可以发现:
问题一:
明明是在第6行再次更改了对象颜色属性为yellow,
但是第5行的打印结果也是yellow?当第5行明明还没有赋值
问题二:
第1行dom元素打印颜色值为空?
应该是因为我没有显式的赋予颜色值,而是继承的
继承的属性值是没有包含在DOM对象的属性里面吗
不管在callback 的任何地方,打印DOM对象,其颜色属性都是以最后一次修改为准
但是单独打印DOM颜色属性,不管是用jQuery对象还是DOM对象获取颜色属性,都是以上一次修改为准
firefox第5行正常的是blue
就和打印引用对象一样,在打印对象后,再修改对象的数据,当从控制台展开后,实际是最后修改的值,并不是当时对象的值。要看当时的值要用JSON.stringify将对象转为字符串后打印才是当时的值。