我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能，虽然它们和传统方法的思想相通，但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁！” 1. addClass() - 添加CSS类 $("#target").addClass("newClass"); //#target 指的是需要添加样式的元素的...
手机图片滑动切换，网上有很多这样的例子，但都借助于其他组件，让代码混乱的不行；还有就是用到css3里的 transform：translate（x,y）;移动元素,不过发现在不支持css3的设备上马上完蛋了，所 有下定决心自己做一个，谁知出现了很多的问题，其中最重要的是给图片加链接，网页中的上下滚动条不能在拖动图片的时候滚动，并且不能兼容pc机器上的拖动；在这里就简单介绍一下遇到的问题和解决的方法； 问题一：给图片加上链接后，在拖动...
CSS伪元素（pseudo elements）不是DOM元素，因此你无法直接选择到它们。 假设有如下HTML代码：techbrood introduction和CSS代码：.techbrood:before { width: 0; }现在你想在某个元素的click事件中动态的把techbrood:before的width属性设置为100%， 有两个方法，一个是添加新的样式：$('head').append(".techbrood::before{ width:100% }");（注意该方法将影响所有的class为techbrood的元素） 另外一个方法是为该元素添加新类，并通...
手机图片滑动切换，网上有很多这样的例子，但都借助于其他组件，让代码混乱的不行；还有就是用到css3里的 transform：translate（x,y）;移动元素,不过发现在不支持css3的设备上马上完蛋了，所以下定决心自己做一个，谁知出现了很多的问题，其中最重要的是给图片加链接，网页中的上下滚动条不能在拖动图片的时候滚动，并且不能兼容pc机器上的拖动；在这里就简单介绍一下遇到的问题和解决的方法； 问题一：给图片加上链接后，在拖动的...
z-index 必须大于遮罩元素demo无标题文档 ul, ul ul { list-style-type:none; margin: 0; padding: 0; width: 15em; } ul a { display: block; text-decoration: none; } ul li { margin-top: 1px; } ul li a { background: #333; color: #fff; padding: 0.5em; } ul li a:hover { background: #000; } ul li ul li a { background: #ccc; color: #000; padding-left: 20px; } ul li ul li a:hover,ul li ul ...
CSS伪元素非常强大，它经常被用来创建CSS三角形提示，使用CSS伪元素可以实现一些简单的效果但又不需要增加额外的HTML标签。有一点就是Javascript无法获取到这些CSS属性值，但现在有一种方法可以获取到： 看看下面的CSS代码：.element:before {content: NEW;color: rgb(255, 0, 0); }.element:before {content: NEW;color: rgb(255, 0, 0); }为了获取到.element:before的颜色属性，你可以使用下面的代码：var color = window.getCom...
我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元 素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能， 虽然它们和传统方法的思想相通，但是却节省了许多代码。还是那句 话 – “jQuery让JavaScript代码变得简洁！” 1. addClass() – 添加CSS类代码如下: $(“#target”).addClass(“newClass”); //#target 指的是需...
本文实例讲述了jQuery使用CSS()方法给指定元素同时设置多个样式的方法。分享给大家供大家参考。具体如下：$(document).ready(function(){$("button").click(function(){$("p").css({"background-color":"blue","font-size":"14px"});}); });This is a heading This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. Set multiple styles for p希望本文所述对大家的jQuery程序设计有所帮助。
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法，下面先给大家分享一下三种方法，希望能帮助到大家。 方法一：1、HTML 部分：我是浮动的我也是居中的2、CSS 部分：.box{float:left;position:relative;left:50%; } p{float:left;position:relative;right:50%; }这样看来就很简单了吧，父元素和子元素同时左浮动...
想达到鼠标悬停到元素a上，显示另一个元素b，可以通过css实现也可以通过js实现。 js: 写两个函数：mouseenter，mouseleave，例如：其中$("#a").mouseenter(function() { $("#b").show("normal"); }); $("#a").mouseleave(function() { $("#b").hide("normal"); });css：a元素和b元素需要满足一定的关系，即b是a的直接子元素：如下html元素，div header_login_name_change 是a元素，ul header_login_menu是b元素。 在a元素上写hover...
本文实例讲述了jQuery+css last-child实现选择最后一个子元素操作。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.gxlcms.com jQuery选择器</title> <style> .red{color...
如果想获取元素的某一个具体的样式属性值 1、元素.style.属性名 需要我们把元素的样式都写在行内样式上才可以（写在样式表中是不管用的） console.log(box.style.height) ->null 在真实项目中，这种方式不常用，因为不能为了获取值而把所有的样式都写在行内（无法实现html和css的分离） 2、使用window.getComputedStyle(当前操作的元素对象，当前元素的伪类【一般我们不用伪类写null】)这个方法获取所有经过浏览器计算过的样式 所...
今天做帮一个师姐做网页遇到一个这样的要求： 鼠标不移动进表格，表格透明度不变。 鼠标移动进表格，hover到的单元格透明度不变，没hover到的单元格透明度改变。 先贴我已经实现好的效果，一开始，表格透明度不变。当我鼠标移动到第二排第三个单元格，其他单元格降低透明度。解决方法 一开始，我用的是CSS实现方法,是下面这样 #table td{opacity:0.5; } #table td:hover{opacity:1; }不过这样一开始进去的时候表格透明度就是0.5，看...
想达到鼠标悬停到元素a上，显示另一个元素b，可以通过css实现也可以通过js实现。 js: 写两个函数：mouseenter，mouseleave，例如：其中 $("#a").mouseenter(function() { $("#b").show("normal"); }); $("#a").mouseleave(function() { $("#b").hide("normal"); });css：a元素和b元素需要满足一定的关系，即b是a的直接子元素：如下html元素，div header_login_name_change 是a元素，ul header_login_menu是b元素。 在a元素上写hove...
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法，下面先给大家分享一下三种方法，希望能帮助到大家。 方法一：1、HTML 部分：<div class="box"><p>我是浮动的</p><p>我也是居中的</p> </div>2、CSS 部分：.box{float:left;position:relative;left:50%; } p{float:left;position:relative;right:50%; } 这样看...