/*动态添加js或css,URL:文件路径，FileType：文件类型(js/css)*/ function AddJsFiles(URL,FileType){var oHead = document.getElementsByTagName(HEAD).item(0);var addheadfile;if(FileType=="js"){addheadfile= document.createElement("script");addheadfile.type = "text/javascript";addheadfile.src=URL;}else{addheadfile= document.createElement("link");addheadfile.type = "text/css";addheadfile.rel="stylesheet";ad...
如果网页中一个 id为“no”的标签，暂且当div标签来tell； 想要在js中设置这个div的css样式，很一般的做法是： var obj = document.getElementByIdx_x_x(no); obj.style.width = 400px; obj.style.height = 300px; 如果要设置一堆又一堆的css样式呢，太麻烦了把、 一般情况下都会结合css来添加className或者改变className达到想要的效果，但是如果你create一个元素，难道还想这样简单点？那就要想别的办法了~ 于是大家就写了一个又...
近来看到个不错的按钮点击效果，当点击时产生一次水波涟漪效果，挺好玩的，于是简单的实现了下(没考虑低版本浏览器兼容问题) 先看看效果吧，如下图（录制gif软件有点渣，看起来卡卡的...） 这种效果可以由元素内嵌套canves实现，也可以由css3实现。 Canves实现 网上摘了一份canves实现的代码，略微去掉了些重复定义的样式并且给出js注释，代码如下 html代码：<a class="btn color-1 material-design" data-color="#2f5398">Press ...
本文实例为大家分享了js贪吃蛇小游戏demo，纯js和css完成，供大家参考，具体内容如下 <!doctype html> <html> <meta charset="utf-8"><head> <style> *{margin: 0;padding:0; }.content{position: absolute;width: 500px;height: 500px;background-color: #212121;}.colo{width: 48px;height: 48px;background-color: #E6E6E6;border: 1px solid #466F85;float: left;}.head{/*background-color: #49DF85;*/background-image: url(...
不啰嗦上代码： WN:(function(){var el = $(<fakeelement>),transition="transition",transitionEnd,animEvent={start:null,iteration:null,end:null},vendorPrefix;transition = transition.charAt(0).toUpperCase() + transition.substr(1);vendorPrefix=(function(){//现在的opera也是webkitvar i=0, vendor=["Moz", "Webkit", "Khtml", "O", "ms"];while (i < vendor.length) {if (typeof el.css(vendor[i] + transition) === ...
如下所示： function getStyle(node, property)｛if (node.style[property]) ｛return node.style[property];｝ else if (node.currentStyle) ｛return node.currentStyle[property];｝ else if (document.defaultView && document.defaultView.getComputedStyle) ｛var style = document.defaultView.getComputedStyle(node, null);return style.getPropertyValue(property);｝return null;｝以上这篇js获取页面引用的css样式表中...
为了日后方便查询，本人翻阅了一些资料总结了以下方法，仅限原生JS，如有不对的地方欢迎指出！只求大家看完觉得有学到点什么就OK了！一、可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式 如：var elm = document.getElementById(test); elm.style.color = black;二、通过Element对象的getAttribute()、setAttribute()、removeAttribute()直接读写style属性 如：elm.setAttribute(style,...
再来个今天某人说过的例子：纯css下拉菜单： 效果图这个的实现很简单，主要是:hover和过渡属性transition的使用。 代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>css</title><style>*{margin: 0;padding:0;font-size: 16px;font-family: "微软雅黑";}#container{width: 100px;margin: 0 auto;text-align: center;position: relative;}#container ul{list-style: none;}#container span{display: in...
移动开发的时候，我们经常会遇到滑动事件，众所周知手机端滑动主要依靠touch事件。最近接连遇到两个页面都有类似overflow:auto的效果，一般情况下通过css设置是可以实现的（虽说丑了点儿）,，但是一旦overflow：auto的元素响应touch事件时就会有诸多不便，例如fullpage中某一元素自滑动，我们可以通过normalScrollElements来使元素滑动的时候不滑动到下一屏，但是在元素滑动到最底部的时候也就不能响应下一屏事件，上滑也是一样，这...
先给大家展示下效果图，如果大家感觉还不错，请参考实现代码哦！HTML： <div class="container iden_top"> <ul> <li> <p class=iden_add_name>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"></div> </li> </ul> <span class="iden_add">+</span> </div><div class="data_z_create_box"> <div class="create_z_create_box_top"> <span class="data_z_create_box_top_title"></span> <div class=...
【行间样式获取】<div id=div1 style="backgroud:red">测试</div> <script>var odiv=document.getElementById(div1); //先获取到要获取样式的元素标签，也就是获取到div1console.log(odiv.style.background); //这样我们就可以获取到了行间的样式了</script> 【内连样式获取】<html><head><style>.div2{background:red;}</style></head><body><div id="div1" class="div2">测试</div><script>var odiv=document.g...
[动态添加css样式]<html><head><script type="text/javascript">window.onload=function(){var head=document.getElementsByTagName(head)[0]; //获取到head元素 var link=document.createElement(link); //创建link元素节点，也就是link标签link.rel="stylesheet"; //为link标签添加rel属性link.href="basic.css"; ...
web页面中很多地方都会用到日历显示，选择等，本文用html、css、javascript实现简单的日历。完成以后的效果与页面左侧的效果差不多，可以切换上个月、下个月。也可以根据实际情况进行扩展。 html html部分比较简单，声明一个div，具体的html用javascript生成。整体内容大概是这样的： <!doctype html> <html> <head><meta charset=utf-8><link rel=stylesheet href=外部的css文件路径 /> <title>demo</title> </head> <body><di...
下面来介绍下我按照网上的视频讲解实现的照片墙效果图。最终实现的效果包括如下： ?当点击某张图片时，该图片移到中间区域并放大显示。当图片被点击时正反面切换显示。 ?某张图片被点击时，所有的图片的位置被随机重排 ?某个控制按钮被点击时，对应的图片显示到正中间，控制按钮进行相应的样式切换。当连续点击某个控制按钮时，图片伴随着按钮的点击进行正反面切换 对整个效果进行VCD分解，如下图： 按照计算机能理解的方式来分解...
前言 项目需求要弄个瀑布流的页面，用的是waterfall这个插件，感觉还是可以的，项目赶就没自己的动手写。最近闲来没事，就自己写个。大致思路理清楚，还是挺好实现的... 原生javascript版 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>瀑布流-javascript</title><style>*{margin:0;padding:0;}#content{position: relative;margin:0 auto;}.box{padding:10px;float: left;}/*首行浮动，第二行开始绝对定...