js css样式操作代码
我们经常用js控制CSS样式,从而达到良好的用户界面和动态效果。我们经常使用的两种方式:
方法1:
var element= document.getElementById(”id”);
element.style.width=”200px”;
element.style.height=”200px”;
element.style.border=”solid 2px red”;
优点是,易懂易用,简单方便;缺点是,样式多了,代码也跟着多了难以维护;而且通过JS复写对象的样式是比较经典的一种销毁原样式并重建的过程,这种销毁和重建,都会增加浏览器的开销。
方法2:
在JS中有一个cssText的方法,语法为:obj.style.cssTest("样式");
如:
element.style.cssText="width:200px;height:200px;border:solid 2px red"
这种方法可以尽量避免页面的多次复写,提高页面的性能
相关文档:
盒子标签和属性对照
CSS语法(不区分大小写)
JavaScript语法(区分大小写)
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border ......
作者:tinyhill 来自:蓝色理想 对 《5 个简单实用的 CSS 属性》进行编辑
1、CSS Clip
剪辑 (clip) 属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素:你必须指定其 position 属性为 absolute,然后指定相对于元素的 top,right,bottom,left 值。
图片剪辑实例(演示)
以下示例演示了如 ......
text-overflow : ellipsis;
white-space : nowrap;
overflow : hidden;
解释一下:
text-overflow :ellipsis; //让截断的文字显示为点点。还有一个值是clip意思是截断不显示点点
white-space : nowrap; //让文字不换行
overflow : hidden; //超出要隐藏
要显示为点点,3个缺一不可,还有,除了firefox,opera其他浏 ......
我承认我并不经常想这个问题......我们写的css的效率是怎么样的呢,浏览器渲染的速度又如何呢?
这是应该是浏览器开发者应该关心的(页面加载更快,用户就会更愉快)。Mozilla有一篇文章:about best practices . Google当然也很关心这个问题,他们也有这样一篇文章:Optimize browser rendering 。
让我们了解下他们主要倡 ......
当在做项目时,通常我们会大量的使用母版页,使用母版页的好处显而易见,但通常在内容页中嵌套母版页时,我们还要在内容页中调用css样式和 javascript函数,好处有了,问题也来了。有两种解决方法,第一种就是在母版页的头部<head></head>标记中,嵌入所有css样式和javascript函数,这样做使得母版页的内容非常 ......