jquery 文字hover 上方显示文字 jquery css hover

CSS样式操作

• 一、获取或设置元素的css

• 1.设置元素的css

• (1) 单个样式设置
• (2) 多个样式设置
• (3) 匿名函数写法

• 2.获取元素的css

• 二、CSS的尺寸属性
• 三、CSS的位置属性

• 1.偏移操作
• 2.获取和设置上滑距
• 3.获取和设置左滑距

参数说明

参数说明name要访问的属性名称properties要设置为样式属性的名/值对value属性值function(index, value)此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。coordinates{top,left}必需。规定以像素计的 top 和 left 坐标。function(index,coords)规定返回被选元素新偏移坐标的函数。val设定滚动条值.box{
           border: 10px solid red;
           width: 100px;
           height: 100px;
           padding: 10px;
           margin: 20px;
       }
       .parent{
           width: 200px;
           height: 300px;
           border: 1px solid #000;
           overflow-y: scroll;
           overflow-x: scroll;
           white-space: nowrap;
       }
	<button class="btn">按钮</button>
	<div class="box"></div>
	<div class="parent">
   	css(name pro [,val fn]<br/>访问匹配元素的样式属性。<br/>
   	height([val fn])<br/>取得匹配元素当前计算的高度值（px）<br/>
   	width([val fn])<br/>取得第一个匹配元素当前计算的宽度值（px）<br/>
   	innerHeight()<br/>获取第一个匹配元素内部区域高度（包括补白、内间>距、内容、不包括边框） <br/>
   	innerWidth()<br/>获取第一个匹配元素内部区域宽度（包括补白、内间>距、内容、不包括边框） <br/>
   	outerHeight([options])<br/>获取第一个匹配元素外部高度（包括内间>距、内容、边框）参数默认时false，若为true时，计算边距在内 <br/>
   	outerWidth([options])<br/>获取第一个匹配元素外部宽度（包括内间距、>内容、边框）参数默认时false，若为true时，计算边距在内<br/>
   	offset([coordinates]<br/>获取匹配元素在当前视口的相对偏移。 <br/>
   	position()<br/>获取匹配元素相对父元素的偏移.<br/>
   	scrollTop([val])<br/>获取匹配元素相对滚动条顶部的偏移。 <br/>
   	scrollLeft([val])<br/>获取匹配元素相对滚动条左侧的偏移<br/>
	</div>

一、获取或设置元素的css

• 以下空格代表或。

方法概述css(name pro [,val fn])访问匹配元素的样式属性。

1.设置元素的css

• 设置元素的css的时候，可以单个样式或者多个样式一次性设置。

(1) 单个样式设置

//单个样式设置
   $('.btn').css('width','100px').css('height','30px').css('color','red');

(2) 多个样式设置

//多个样式设置
   $('.btn').css({
       width:'100px',
       height:'30px',
       color:'#fff',
       backgroundColor:'#000',
       fontSize:'13px'
   });

(3) 匿名函数写法

$('.btn').css("color",function(index){
        console.log(index);//当前对象的索引
        return 'blue';
    })

2.获取元素的css

• 获取每次只能获取一个，不能多个获取。

console.log($('.btn').css('width'));//96px--内容区域的宽度

二、CSS的尺寸属性

• 以下空格代表或。

方法概述height([val fn])取得匹配元素当前计算的高度值（px）width([val fn])取得第一个匹配元素当前计算的宽度值（px）innerHeight()获取第一个匹配元素内部区域高度（包括补白、内间距、内容、不包括边框）innerWidth()获取第一个匹配元素内部区域宽度（包括补白、内间距、内容、不包括边框）outerHeight([options])获取第一个匹配元素外部高度（包括内间距、内容、边框）参数默认时false，若为true时，计算边距在内outerWidth([options])获取第一个匹配元素外部宽度（包括内间距、内容、边框）参数默认时false，若为true时，计算边距在内
• height----元素的内容区域高
• width----元素的内容区域宽
• innerHeight()----元素的高（内容区域+补白区域）
• innerWidth()----元素的宽（内容区域+补白区域）
• outerHeight----元素的实际高 （内容区域+补白区域，设置参数算外间距）参数默认时false，若为true时，计算边距在内
• outerWidth----元素的实际宽 （内容区域+补白区域，设置参数算外间距）参数默认时false，若为true时，计算边距在内
console.log($('.box').width());//100
   console.log($('.box').height());//100
   console.log($('.box').innerWidth());//120
   console.log($('.box').innerHeight());//120
   console.log($('.box').outerWidth(true));//180
   console.log($('.box').outerHeight(true));//180
• 也可以写成匿名函数形式
$("button").width(function (index){
        console.log(index);//0
        return 100;
    });

三、CSS的位置属性

• 以下空格代表或。

方法概述offset([coordinates])获取匹配元素在当前视口的相对偏移。position()获取匹配元素相对父元素的偏移.scrollTop([val])获取匹配元素相对滚动条顶部的偏移。scrollLeft([val])获取匹配元素相对滚动条左侧的偏移。

1.偏移操作

• 设置偏移，会让元素默认相对定位。

console.log($('.box').offset());//{top: 50, left: 20}
   //设置偏移，会让元素默认相对定位
   $('.box').offset({left:0,top:10});
   //获取的是相对父容器的偏移(position只能获取，不能设置)
   console.log($('.box').position());//{top: -10, left: -20}
• 匿名函数写法
$("#btn").offset(function (index, oldvalue) {
        console.log(index, oldvalue);//当前元素的索引和 原始偏移值
        //这里必须返回
        return {left: 100, top: 100};
    });

2.获取和设置上滑距

//获取上滑距
   console.log($('.parent').scrollTop());//0
   //设置上滑距
   $('.parent').scrollTop(100);
   console.log($('.parent').scrollTop());//100

3.获取和设置左滑距

//获取左滑距
   console.log($('.parent').scrollLeft());//0
   //设置上滑距
   $('.parent').scrollLeft(100);
   console.log($('.parent').scrollLeft());//100