为指定元素增加样式的js代码_javascript技巧

这个函数主要是为指定的元素添加样式。相当于Jquery中的addClass(class)--为每个匹配的元素添加指定的类名。

在Jquery中要求 class (String) : 一个或多个要添加到元素中的CSS类名,请用空格分开。而这个函数也是有这样的要求。

复制代码 代码如下:

div{ border:1px solid #ccc; width:200px; height:200px;}
.a{ background:#900; }
.b{ font-size:30px; font-weight:bold;}

复制代码 代码如下:

function addClass(elements, value)
{
if (!elements.className) {
elements.className = value;
}
else
{
newClass = elements.className;
newClass += " ";
newClass += value;
elements.className = newClass;
}
}
window.onload = function ()
{
var test = document.getElementById('test');
alert(test.className);
addClass(test, 'a b');
//addClass(test, 'b');
}

<div id="test">这里是测试层</div>

时间: 2024-08-04 10:26:57

为指定元素增加样式的js代码_javascript技巧的相关文章

当滚动条滚动到页面底部自动加载增加内容的js代码_javascript技巧

1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.s

JS获取和修改元素样式的实例代码_javascript技巧

1.获取元素样式: 可以通过元素的style属性,获取元素行内样式.style属性是一个对象,包括一系列样式属性.例如:color, backgourdColor. 上面讲的通过style属性获取元素样式,不推荐使用. 下面的一段代码,可以获取元素运行时的样式,即全局的样式.这种方式可以动态获取元素的样式,例如元素大小. // node:将要获取其计算样式的元素节点 // attr: 样式属性名称 function getCurrentStyle(node, attr) { var style

js获取对象、数组的实际长度,元素实际个数的实现代码_javascript技巧

js获取对象.数组的实际长度,元素实际个数的实现代码 /*获取对象.数组的长度.元素个数 *@param obj 要计算长度的元素,可以为object.array.string */ function count(obj){ var objType = typeof obj; if(objType == "string"){ return obj.length; }else if(objType == "object"){ var objLen = 0; for(v

javascript 动态修改样式和层叠样式表代码_javascript技巧

W3C DOM2样式规则 ========================================================== CSSStyleSheet对象 CSSStyleSheet对象表示的是所有CSS样式表,包括外部样式表和使用<style type="text/css"></style>标签指定的嵌入式样式表. CSSStyleSheet同样构建于其他的DOM2 CSS对象基础之 上,而CSSStyleRule对象表示的则样式表中的每条

JavaScript操作select元素和option的实例代码_javascript技巧

废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <title></t

图片旋转、鼠标滚轮缩放、镜像、切换图片js代码_javascript技巧

本文实例为大家展示了图片旋转.鼠标滚轮缩放.镜像.切换图片多重效果,提供了详细的代码,分享给大家供大家参考,具体内容如下 具体代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <title>图片旋转,鼠标滚轮缩放,镜像,切换图片</title> <meta charset="utf-8" /> <!--<script type="

让编辑器支持word复制黏贴、截屏的js代码_javascript技巧

chrome有很多人性化的API,比如拖拽, 比如图片可以转化为base64等: 比如知乎上面的回复中可以直接黏贴图片,  就不需要手动点击图片上传按钮, 选择图片, 确认上传等等: 知乎参考地址:打开    让编辑器支持word的复制黏贴, 其中图片会转化为base64编码, 如果是通过远程打开这个静态页, 黏贴word文档的时候, 图片不会黏贴进来, 因为远程地址无法访问本地磁盘的绝对路径, 如果把下面代码保存成静态界面打开, 那么word中的图片都可以看见, 而且都会被转化为base64编

JavaScript 读取元素的CSS信息的代码_javascript技巧

比如为某个HTML元素级联了一组样式信息,其中width属性的值为80px.然后调用脚本读取这个值,得到的结果总是一个空字符串,而事实上我想得到"80px".针对这种情况,David Flanagan在<JavaScript 权威指南>(第五版)一书中给出了解决方案. 以下是针对JavaScript: The Definitive Guide, 5th Edition Chapter16 Section4的翻译 脚本计算的样式 HTML元素的style属性相当于style

多浏览器兼容性比较好的复制到剪贴板的js代码_javascript技巧

对于非ie浏览器他是用flash来实现的,js代码如下: 复制代码 代码如下: <script type="text/javascript"> function copy_code(copyText) { if (window.clipboardData) { window.clipboardData.setData("Text", copyText) } else { var flashcopier = 'flashcopier'; if(!docum