使用原生JavaScript改变DOM元素面试题
今天遇到一个面试题,感觉挺有意思的,就回来研究一下,发现遇到些问题,最后通过百度找出了问题所在,下面请看:
首先是代码骨架:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>#box {width: 200px;height: 200px;color: yellow;background-color: #ff0000;}</style>
</head>
<body><div id="box"><p id="text">Hello World</p></div><script> </script>
</body>
</html>
实际图为:
我复原了一下骨架(但是跟我看到的原题并不一样,原因在下面),然后题目要求是使用原生JavaScript,每2秒改变文字和背景的颜色(就是颜色互换),在5秒后结束。
然后我开始实现,在实现过程中,出现了一点问题,如下代码:
var box = document.getElementById('box');function active () {var textColor = box.style.color;var textBg = box.style.backgroundColor;console.log(textColor);console.log(textBg);
}
active();
通过el.style
来获取元素的颜色和背景色,然后再控制台打印,发现打印不出来,显示是这样的:
因为我在当时上机操作的时候,是能够获取到的,然后琢磨了一下,没想明白为什么获取不到,结果百度后发现,通过el.style
可以改变元素,但获取元素是获取不到的,这种方式只能通过行内样式才能获取到,也就是这样的<div style="color: yellow"></div>
。当时我还嘀咕,这面试题的样式怎么全写成行内的了,这时候我才知道原因。
el.style
只能获取元素标签中style
里的样式值,无法获取到在<style></style>
里定义的样式和通过<link href="style.css">
加载进来的样式
但是本着探究的心理,我又百度了一下,发现通过另一个方法可以获取到get.ComputedStyle()[]
,用法如下:
//获取元素样式
//使用方法 getStyle(元素,"属性名") 如:getStyle(oBox,"background")
//因为版本问题,IE8不支持这个方法,可以使用currentStyle[]来代替function getStyle(obj, attr) {if(window.getComputedStyle) { //这里进行判断,如果浏览器支持这个方法,则使用。return getComputedStyle(obj)[attr];}else { //如果浏览器不支持上面的方法,那么就使用这个方法return obj.currentStyle[attr];}};
那么,在使用了如上的方法后,就能够获取到元素的颜色和背景色了,在控制台可以打印出来,代码为:
var box = document.getElementById('box');
function active () {var textColor = getStyle(box, 'color');var textBg = getStyle(box, 'backgroundColor');console.log(textColor);console.log(textBg);
}
active();//获取元素样式
function getStyle(obj, attr) {if(window.getComputedStyle) {return getComputedStyle(obj)[attr];}else {return obj.currentStyle[attr];}};
控制台图为:
图片以RGB的形式打印出来,说明获取成功了。然后就是改变颜色了,代码为:
var box = document.getElementById('box');
//这里执行对元素文字和背景的转换function active () {var textColor = getStyle(box, 'color');var textBg = getStyle(box, 'backgroundColor');console.log(textColor);console.log(textBg);box.style.color = textBg;box.style.backgroundColor = textColor;}active();//其他代码省略
以上代码只能改变一次,通过使用setInterval
定时器来进行循环,代码为:
//其他代码省略setInterval(active, 2000);
这样就可以在2秒内进行循环改变了,但是会一直循环改变下去,这时候需要使用clearInterval
来清除定时器,代码为:
//把定时器赋值给h
var h = setInterval(active, 2000);//在60秒之后执行操作setTimeout((function() {//清除定时器clearInterval(h)}), 60000);
以上就是完成的全部步骤了,虽然很简单,但是我还是在清除定时器的时候卡了一下,哎,还需要多加学习啊。
下面贴出全部代码:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>#box {width: 200px;height: 200px;color: yellow;background-color: #ff0000;}</style>
</head>
<body><div id="box"><p id="text">Hello World</p></div><script> var box = document.getElementById('box');//这里执行对元素文字和背景的转换function active () {var textColor = getStyle(box, 'color');var textBg = getStyle(box, 'backgroundColor');console.log(textColor);console.log(textBg);box.style.color = textBg;box.style.backgroundColor = textColor;}//把定时器赋值给hvar h = setInterval(active, 2000);//在5秒之后执行操作setTimeout((function() {//清除定时器clearInterval(h)}), 5000);//获取元素样式function getStyle(obj, attr) {if(window.getComputedStyle) {return getComputedStyle(obj)[attr];}else {return obj.currentStyle[attr];}}; </script>
</body>
</html>
使用原生JavaScript改变DOM元素面试题相关推荐
- html动态资源加载进度,JavaScript_快速解决js动态改变dom元素属性后页面及时渲染的问题,今天实现一个进度条加载过程 - phpStudy...
快速解决js动态改变dom元素属性后页面及时渲染的问题 今天实现一个进度条加载过程,dom结构其实就是两个div 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文 ...
- 解决js动态改变dom元素属性后页面及时渲染问题
解决js动态改变dom元素属性后页面及时渲染问题 参考文章: (1)解决js动态改变dom元素属性后页面及时渲染问题 (2)https://www.cnblogs.com/fangsmile/p/49 ...
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 添加和删除节点(HTML 元素) <div id="div1"> <p id="p1"& ...
- 如何使用纯JavaScript隐藏DOM元素
How do you hide a DOM element using plain JavaScript? 如何使用纯JavaScript隐藏DOM元素? Every element exposes ...
- 【面试必备】javascript操作DOM元素
前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
- JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript ...
- JavaScript HTML DOM元素节点常用操作接口
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...
- 通过原生js获取dom元素的九种方式
获取dom元素 <body><!-- <div id="box">我是一个DIV</div><p class="item& ...
- javascript 改变 HTML 元素 element.innerHTML、.attribute、.setAttribute(attribute, value)、.style.property
改变元素的 inner HTML element.innerHTML = new html content 改变元素的 inner HTML eg: div.innerHTML = '这是一条测试文本 ...
最新文章
- 自己写的小程序 deb打包
- 一点点学习PS--实战四
- python堆排序求topn_Java堆排序,取得前TopN个数
- goaccess_nginx日志分析工具
- ASP.NET MVC 入门系列教程
- QtCreate不能使用代码提示功能
- Excel读取某一列的宏代码VBA代码源码及解说(详尽版)
- jQuery检查某个元素在页面上是否存在
- 传统的6d位姿估计fangfa1_基于视觉的机器人抓取从物体定位、位姿估计到抓取位姿估计 | 公开课预告...
- 计算机分屏解决方案,一机多屏显示技术解决方案
- 电气自动化和计算机专业比较,高考专业自动化专业和电气工程及其自动化的区别 哪个好...
- IOI2020国家集训队作业乱做
- Windows-Exploit-Suggester
- mybatis 的大于号 小于号 大于等于 小于等于
- Network Switching Software Platform Guide学习笔记
- Quartz(二) quartz测试
- 【白板推导系列笔记】降维-主成分分析-概率角度(Probabilistic PCA)
- Python中的ppid
- 安装,配置rp-pppoe拨号软件,使adsl成功上网(转)
- C#读写调整UVC摄像头画面-饱和度