代码如下:<html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="jquery-1.8.2.js"></script> <title>背景透明</title> <style> *{ margin:0; padding:0; } body{ position:relative; width:100%; height:100%; } .aaa{ background-color:#fff; border:10px solid gray; border-radius:4px 4px 4px 4px; display:none; width:300px; position:absolute; top:30%; left:30%; z-index:11; } .show{ display:n...
用JavaScript修改CSS属性 只有写原生的javascript了。 1.用JS修改标签的 class 属性值： class 属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，如果改变了 class 属性的值，标签所引用的样式表也就更换了，所以这属于第一种修改方法。 更改一个标签的 class 属性的代码是： document.getElementById( id ).className = 字符串; document.getElementById( id ) 用于获取标签对应的 DOM 对象，你也可以用其它方法...
document.styleSheets里保存了当前页面上所有CSS规则的集合。通过它可以遍历出页面<style>里定义的所有selector，访问selectorText属性可得选择器的匹配规则。然后将规则规则传递给 document.querySelectorAll 即可获取页面内匹配此规则的元素列表。这里我们只求CSS规则的覆盖率，所以访问 querySelectorAll().length 即可。通过排序就可看出各个CSS使用情况。代码很简单。 代码如下:var usage = [];var sheets = document.styleSh...
代码如下:<html> <title>拖动列宽的表格</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"><!-- .bg td{ font-size:12px; text-align:left; line-height:15px; height:20px; } .bg td.tit{ background-color:#e2e2e2; height:17px; text-align:center; line-height:15px; } .bg td.num{ background-color:#e2e2e2; text-align:right; line-height:15px; width:30px; height:...
今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果，具体方法如下： 第一步：在连接样式表的元素里定义一个id,例如 代码如下:<link href=”1.css” rel=”stylesheet” type=”text/css” id=”css”> 我定义的id是css。 第二步：写一个js函数，代码如下： 代码如下:<script type=”text/javascript”> function change(a){ var css=document.getElementById(“css”); if (a==1) css.setAttribute(“href”,”...
使用jquery动态加载js，css文件 代码如下:$.extend({ includePath: , include: function(file) { var files = typeof file == "string" ? [file]:file; for (var i = 0; i < files.length; i++) { var name = files[i].replace(/^\s|\s$/g, ""); var att = name.split(.); var ext = att[att.length - 1].toLowerCase(); var isCSS = ext == "css"; var tag = isCSS ? "link" : "script"; var attr = isCSS ? " type=text/css rel...
DIV+CSS+JS实现不间断横向滚动代码 代码如下:<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向不间断滚动DIV CSS代码-DIVCSS5</title> </head> <body> <style> .scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;} .scroll_div img {width:120px;height:49px;border: 0;margin: auto 8px; } ...
一个项目想用jQuery做一个可以半折叠的DIV元素，苦于jQueryUI中accordion没有提供相关的方法，就自己写了个。以前使用jQueryUI的时候发现能够用的accordion全部折叠起来了，没办法设置折叠的最小高度。 代码质量很低，希望老鸟能够指点指点。 下图是效果展示，能够借由jQuery的函数展开收缩 代码如下://author: hlhr //require: Jquery1.4 and above function animate_toggle_height(maxh,minh,maxo,mino,element,speed) {//这个...
代码如下:<HTML> <HEAD> <TITLE>JS+CSS制作的DIV层最小化和随意拖拽排序功能</TITLE> <style type="text/css"> body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alpha(opacity=30); } .normal { position:absolute;/*重要*/ width:300px; #height:10px; border:1px solid #666666; background-color:#FFFFFF; } .over { position:absolute;/*重要*...
最近看一个网站，发现显示器不同的分辨率，样式文件调用的也不一样，今天写了一个例子研究一下， 代码如下:<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" id="sc" type="text/css" href="css/c1.css"/> <script type="text/javascript"> window.onload=function(){ var sc=document.getElementById("sc"); var d=document.getElementById("d"); if(screen.width>1024)...
在正式开始本文之前，先来简单介绍下HTML的<a>标签：使用<a>标签，我们可以在HTML页面上定义锚（anchor），锚有两种用法： 通过使用 href 属性，创建指向另外一个文档的链接（或超链接） 通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接） 本文的内容与锚的第一种用法有关。 代码如下:<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Web.WebF...
但是这样做就不利于插件的移植,所以就写了这个函数用来动态产生Css. 代码如下:AddCss=function(c){ var Sty=document.createElement(style); Sty.type=text/css; if(Browser.ie){ Sty.styleSheet.cssText=c; }else{ var Frag=document.createDocumentFragment(); Frag.appendChild(document.createTextNode(c)); Sty.appendChild(Frag); } document.getElementsByTagName(head)[0].appendChild(Sty); }; AddCss(a{background-colo...
美工做的css样式里icon越来越多，手工来写icon名几乎不可能实现。所以就有了这个功能点：将css样式里的所有icon类列举出来以图形化的形式显示供配置人员选择！ 搜索一圈，发现介绍从css里遍历东西的文章非常少。于是花了半天的时间自己来实现了！先看下一个选择图标的demo： 这里用的是easyui：一个comboxtree。 这里省略引用css和js库的代码（jquery和easyui库）。 html： 代码如下:<input id="cc" class="easyui-combotree" s...
测试代码：IE6/7/8下cssText返回值少了分号 TEST var div = document.getElementsByTagName('div'); alert(div[0].style.cssText); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 各浏览器输出如下IE6/7/8 :IE9/Firefox/Chrome/Safari/Opera :可以看到IE6/7/8中少了分号。使用cssText属性时需注意。
有序列表ol漂亮分页样式 a { color:#000;} .pagination{ overflow:hidden; margin:0; padding:10px 10px 6px 10px; border-top:1px solid #f60; _zoom:1; } .pagination *{ display:inline; float:left; margin:0; padding:0; font-size:12px; } .pagination i{ float:none; padding-right:1px; } .currentPage b{ float:none; color:#f00; } .pagination li{ list-style:none; margin:0 5px; } .pagin...