前端笔试选择题（21-25）

有出路
403 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

21

下列js可以让一个input的背景颜色变成红色的是？

A、inputElement.style.backgroundColor = 'red';

B、inputElement.backgroundColor = 'red';

C、inputElement.style.backgroundColor = '#0000';

D、inputElement.backgroundColor = '#0000';

参考答案：A

答案解析：

一、先看题：

用js让一个input的背景颜色变成红色。

二、思路：

  1. 获取该元素
  2. 通过该元素拥有的属性或方法来改变元素的样式。

三、细节：

  1. 获取元素可以借助document.getElementById()/document.getElementsByTagName()等若干方法，也可以利用层级关系（父子关系、兄弟关系等）。而这一点题目已经直接略过了，它直接给出了该元素的引用名称inputElement。
  2. 通过js来改变元素样式的两个最常见的API为：style、className。使用style接口一次只能改变一个样式，而使用className则可以同时改变多个样式，当然前提是已经用css定义该类名的相关样式。
  3. backgroundColor? background-color?
    简单说一下：在使用点运算符时，浏览器看到“-”就没法正确解析了，在那种情况下，只能将该变量使用驼峰命名法来表示。而使用方括号表示法，"-"被理解为字符串中的内容，该字符串能被正确解析。
    eg:
    inputElement.style .backgroundColor = 'red'; // 这是没问题的
    inputElement.style .background-color = 'red'; // 这是错的，浏览器看不懂啊...
    inputElement.style ["background-color"]  = 'red'; // 这也是可以的
  4. 表示红色有若干种方法:
  • 颜色名：red
  • 百分数：rgb(100%, 0%, 0%)
  • 数值：rgb(255, 0, 0)
  • 十六进制：#FF0000
  • 简写的十六进制：#F00

22

关于下列CSS选择器：ID选择器、类选择器、伪类选择器、标签名称选择器，排序正确的是：（）

A、ID选择器>Class选择器>伪类=标签名称选择器

B、ID选择器>伪类>Class选择器>标签名称选择器

C、ID选择器>Class选择器>伪类>标签名称选择器

D、ID选择器>Class选择器=伪类>标签名称选择器

参考答案：D

答案解析：

答案：D

解析：

一般来说，选择器的优先级（从上往下依次降低）是：

  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
  2. 作为style属性写在元素内的样式
  3. id选择器
  4. 类选择器
  5. 标签选择器
  6. 通配符选择器

所以选项B和D可以确定答案肯定是从这两个里面出，那么究竟是class选择器优先级高，还是伪类选择器优先级高呢？来段代码效果，一目了然：

效果：

注意一样的样式代码，前后顺序不同，导致的效果变化：

效果：

也就是说：伪类选择器和类选择器的优先级是一样的，谁在后面谁起作用，因为我们知道后面的样式会覆盖前面的样式

23

css设置链接样式下列说法正确的是（）

A、a:hover可以在a:visited 之前生效

B、a:hover可以在a:link之前生效

C、a:active 必须位于 a:hover 之后

D、a:active - 链接被点击后的样式

参考答案：C

答案解析：

  1. link:连接平常的状态 
  2. visited:连接被访问过之后 
  3. hover:鼠标放到连接上的时候 
  4. active:连接被按下的时候 正确顺序：“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。 再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active . 因为当鼠标经过未访问的链接，会同时拥有a:link、a:hover两种属性，a:link离它最近，所以它优先满足a:link，而放弃a:hover的重复定义。当鼠标经过已经访问过的链接，会同时拥有a:visited、a:hover两种属性，a:visited离它最近，所以它优先满足a:visited，而放弃a:hover的重复定义。究其原因，是css的就近原则“惹的祸”。

24

css属性position的值不包含

A、absolute

B、inherit

C、box

D、static

参考答案：C

答案解析：

absolute，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位； 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定； fixed，生成绝对定位的元素，相对于浏览器窗口进行定位； 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative，生成相对定位的元素，相对于其正常位置进行定位； static，默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）； inherit，规定应该从父元素继承 position 属性的值。

25

JavaScript代码的用途描述错误的是（）

A、JavaScript在网页制作中广泛使用

B、JavaScript是一种功能强大的弱类型语言

C、JavaScript是一种脚本语言，所以它一般没人用

D、avaScript是一种解释型脚本语言

参考答案：C

avatar
文章
阅读
粉丝