JavaScript__脚本化CSS的练习题

一、选择题
1.元素对象的style属性,它的类型是( )
A. 字符串
B. CSSStyleDeclaration
C. CSSStyle
D. CSSDeclaration

2.设置一个元素的字号的语法是( )
A. e.style.fontSize = “24pt”
B. e.style.font-size = “24pt”
C. e.style.fontSize = “24”
D. e.style.fontsize = “24pt”

3.设置元素e的左边距属性值为300像素的正确做法是
A. e.style.left = “300”
B. e.style.left = “300px”
C. e.style.offsetLeft = “300”
D. e.style. offsetLeft = “300px”

4.设置e的样式属性为字符串s,语法不正确的是( )
A. e.setAttribute(“style”, s)
B. e.style.cssText = s
C. e.style = s
D. e.style. css = s

5.关于动画的实现,表述正确的是( )
A. 使用Frame对象来实现

B. 使用Animation方法来实现
C. 单纯使用CSS的Animation属性

D. 使用setTimeout()或setInterval()重复调用函数来修改元素的内联样式

6.getComputedStyle()方法返回的是( )
A. 元素的内联样式
B. 元素的计算样式
C. 元素的外部样式
D. 元素的style属性的样式

7.getComputedStyle()方法的返回值是( )
A. 一个字符串
B. 一个CSSStyleDeclaration对象
C. 一个CSS对象
D. 一个Style对象

8.关于计算样式对象和表示内联样式的对象之间的区别,表述错误的是( )
A. 计算样式的属性是只读的
B. 计算样式的值是绝对值
C. 计算样式的属性保存在cssText中
D. 不计算复合属性,只基于最基础的属性

9.关于脚本化CSS类,语法正确的是( )
A. e.class = “myclass”
B. e.className = “myclass”
C. e.style.class = “myclass”
D. e.style.className = “myclass”

10.HTML5,为每个元素定义了classList属性,它的类型是( )
A. Style对象
B. CSSStyleDeclaration对象
C. NodeList对象
D. DOMTokenList对象

11.DOMTokenList定义的方法,不包括( )
A. add()
B. remove()
C. edit()
D. toggle()

12.关于脚本化样式表,错误的表述是( )
A. 操纵CSSStyleSheet对象

B. 有id属性值,可以用document.getElementById()函数来选择它们
C. document.styleSheets属性是一个只读的数组对象

D. document.styleSheets属性包含CSSStyleSheet对象,表示与文档关联在一起的样式表

13.浏览器关闭并忽略样式表的方法是( )
A. enabled属性
B. disabled属性
C. toggle方法
D. cancel属性

14.关于cssRule对象,表述错误的是( )
A. CSSRule对象代表所有CSS规则,包含如@import和@page等指令

B. 在IE中,rules[]数组只包含样式表中实际存在的样式规则
C. selector是规则的CSS选择器

D. cssText属性来获得规则的文本表示形式

15.document.styleSheets定义的方法包括( )
A. insertRule()
B. editRule()
C. removeRule()
D. addRule()

16.创建新样式表的方法是( )
A. document.addStyleSheet()
B. document.createStyleSheet()
C. document.createCSS()
D. document.addCSS()

二、综合题
1.将e转化为相对定位的元素,使之左右“震动”
//第一个参数可以是元素对象或者元素的id
//如果第二个参数是函数,以e为参数,它将在动画结束时调用
//第三个参数指定e震动的距离,默认是5像素
//第四个参数指定震动多久,默认是500毫秒
function shake(e, oncomplete, distance, time) {
// 处理变量
if (typeof e === “string”) e = document.getElementById(e);
if (!time) time = 500;
if (!distance) distance = 5;
var originalStyle = e.style.cssText; // 保存e的原始style
e.style.position = “relative”; // 使e相对定位
var start = (new Date()).getTime(); // 注意,动画的开始时间
animate(); // 注意,动画的开始时间
//函数检查消耗的时间,并更新e的位置
//如果动画完成,它将e还原为原始状态
//否则,它更新e的位置,安排它自身重新运行
function animate() {
var now = (new Date()).getTime(); // 得到当前时间
var elapsed = now-start; //从开始以来消耗了多长时间?
var fraction = elapsed/time; // 是总时间的几分之几?
if (fraction < 1) { // 如果动画未完成
//作为动画完成比例的函数,计算e的x位置
//使用正弦函数将完成比例乘以4pi
//所以,它来回往复两次
var x = distance * Math.sin(fraction*4*Math.PI);
e.style.left = x + “px”;
// 在25毫秒后或在总时间的最后尝试再次运行函数
// 目的是为了产生每秒40帧的动画
setTimeout(animate, Math.min(25, time-elapsed));
}
else { // 否则,动画完成
e.style.cssText = originalStyle // 恢复原始样式
if (oncomplete) oncomplete(e); // 调用完成后的回调函数
}
}
}

2.以毫秒级的时间将e从完全不透明淡出到完全透明
//在调用函数时假设e是完全不透明的
// oncomplete是一个可选的函数,以e为参数,它将在动画结束时调用
//如果不指定time,默认为500毫秒
//该函数在IE中不能正常工作,但也可以修改得能工作,
//除了 opacity, IE使用非标准的filter属性
function fadeOut(e, oncomplete, time) {
if (typeof e === “string”) e = document.getElementById(e);
if (!time) time = 500;
//使用Math.sqrt作为一个简单的“缓动函数”来创建动画
//精巧的非线性:一开始淡出得比较快,然后缓慢了一些
var ease = Math.sqrt;
var start = (new Date()).getTime(); //注意:动画开始的时间
animate(); // 动画开始
function animate() {
var elapsed = (new Date()).getTime()-start; //消耗的时间
var fraction = elapsed/time; //总时间的几分之几?
if (fraction < 1) { //如果动画未完成
var opacity = 1 – ease(fraction); //计算元素的不透明度
e.style.opacity = String(opacity); //设置在e上
setTimeout(animate, //调度下一帧
Math.min(25, time-elapsed));
}
else { //否则,动画完成
e.style.opacity = “0”; //使e完全透明
if (oncomplete) oncomplete(e); //调用完成后的回调函数
}
}
}

3.用指定的因子缩放元素e的文本尺寸
function scale(e, factor) {
//用计算样式查询当前文本的尺寸
var size = parseInt(window.getComputedStyle(e,””).fontSize);
//用内联样式来放大尺寸
e.style.fontSize = factor*size + “px”;
}

4.用指定的因子修改元素e的背景颜色
// Factors > 1 颜色变浅,factors < 1颜色变深
function scaleColor(e, factor) {
var color = window.getComputedStyle(e, “”).backgroundColor; //查询
var components = color.match(/[\d\.]+/g); // 解析r、g、b和a分量
for(var i = 0; i < 3; i++) { // 循环r、g和b
var x = Number(components[i]) * factor; // 缩放每个值
x = Math.round(Math.min(Math.max(x, 0), 255)); //设置边界并取整
components[i] = String(x);
}
if (components.length == 3) // rgb()颜色
e.style.backgroundColor = “rgb(” + components.join() + “)”;
else // rgba()颜色
e.style.backgroundColor = “rgba(” + components.join() + “)”;
}

5.设置所有返回元素的disabled属性
function disableStylesheet(ss) {
if (typeof ss === “number”)
document.styleSheets[ss].disabled = true;
else {
var sheets = document.querySelectorAll(ss);
for(var i = 0; i < sheets.length; i++)
sheets[i].disabled = true;
}
}



转载请注明:陈童的博客 » JavaScript__脚本化CSS的练习题

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量

'; } if( dopt('d_footcode_b') ) echo dopt('d_footcode'); ?>