原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ele=document.createElement("style"); ele.innerHTML=style; document.getElementsByTagName('head')[0].appendChild(ele) 第二种,使用中间元素div转化为dom(推荐): var

原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类","替换后的类");

昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页加载不进去jquery所以先这么着试试,意料之中没有问题. 毕竟刚开始给自己博客添加JS才疏学浅,有更好的方法添加更炫酷的动态效果可以分享给我呀.有大神给指点指点那就更多谢啦.欢迎指正错误~ 效果如下: 话不多说了,先添加css代码,主要是用来画“小心心”的: body {position: rel

一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> </div> <div id="div

js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = element.style[property]; if(!value){ if(window.getComputedStyle) { //非IE value = window.getComputedStyle(element,null)[property]; } else if(element.cur

1. 任何支持 style 特性的 HTML 元素在 JavaScript 中都对应着有一个 style 属性,指向一个 CSSStyleDeclaration 的一个实例对象,包含该元素的内嵌style样式(直接定义在HTML元素上的style). 对于使用短线分割的CSS属性,在JavaScript中转为驼峰式. 几个常见的属性: CSS属性 JavaScript属性 background-image style.backgroundImage color style.color displ

事件 事件添加方式 EvenTarget.addEventListener(EvenName, functionName, option); EventName: example => click dblclick change blur focus keyperss keydown keyup mouseover mouseout; option 可以是一个对象也可以是Boolean值. Boolean值时, 事件运行方式true为事件冒泡阶段处理事件(自下而上), 不写传参时为默认false

function createStyle(){ return"*{padding:0;margin:0;border:0}.loading{width:640px;height:1024px;margin:0 auto}.loadImg{width:640px;height:1024px;animation:fadeInOut 3s linear;-webkit-animation:fadeInOut 3s linear;-moz-animation:fadeInOut 3s linear;op

为 <div> 元素添加 class: document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass")

1.添加类名: document.getElementById("myDiv").classList.add('mystyle'); 2.删除类名: document.getElementById("myDiv").classList.remove('mystyle'); 3.检查是否含有某个css类: myDiv.classList.contains('myCssClass'); //return true or flase; 注意:类名直接写,不可面“.”; 如

function getStyle(ele,attr){ if( ele.currentStyle ){ return ele.currentStyle[attr]; // ie } else { return getComputedStyle(ele)[attr]; // 非ie } }

$S.addHandler($S.getId(fav[i]),'mouseover',function(){                this.className += " "+'S_hover';            });            $S.addHandler($S.getId(fav[i]),'mouseout',function(){                var reg = new RegExp('(\\s|^)'+'S_hover'+'(\\s|

兼容pc和移动端,还兼容了surface平板. surface平板特别坑,既可以用鼠标也能用触摸屏,也就是说同时有touch事件和mouse事件. function addEvent(_target,eventType,fnHandler,useCapture){ useCapture==undefined?useCapture=true:""; var touchable,isSurface,msPointerable; try{ msPointerable = window.nav

内联样式的获取 function getStyle(obj,attr){//简单的获取内联样式 return obj.currentStyle?obj.currentStyle[attr]:obj.getComputedStyle(obj,false)[attr]; }   下面是比较完善的, //参考地址 http://stylechen.com/getstyle2.html var getStyle = function( elem, style ){ //单位如果em或%的单位,getCo

创建一个页面: 1.首先让我们看一下整个vue.js的目录,如下图所示: 2.现在让我们创建一个页面吧: 2-1首先你需要新建路由(就和建立一个如何找到项目文件的目录一个意思):进入src/router/index.js修改即可 import Vue from 'vue' import Router from 'vue-router' //就拿下面这行作比方,下面这行就相当于引入Say这个component import SayHi from '@/components/SayHi' Vue.u

一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test"></span> // 获取元素 var ele = document.getElementsByClassName("abc"); // 方法1:直接赋值,会覆盖原有的值 ele.className = "test1"; <!-- clas

react开发过程中,经常会需要动态向元素内添加样式style或className,那么应该如何动态添加呢??? 一.react向元素内,动态添加style 例如:有一个DIV元素, 需要动态添加一个 display:block | none 样式, 那么: <div style={{display: (index===this.state.currentIndex) ? "block" : "none"}}>此标签是否隐藏</div>或者,

原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasClass,toggleClass:原生js添加删除class 原生js添加删除class 代码如下: var dom = { /** 功能说明:匹配元素是否含有指定class * @param el 指定的DOM元素 * @param className 匹配的class名 * */ hasClas

一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了. 原生JS虽然没有jquery那么的好用.便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖.可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行. 二.正文 1. jquery和原生JS获取节点的比较 //这是HTML代码,

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生js分页</title> <style type="text/css"> #pageNav { display: inline-block; } #pageNav a { display: inline-block; wi

原生JS添加节点方法与JQuery添加节点方法的比较及总结   一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> &