05-jquery-CSS 相关操作

野性酷女 2022-12-08 12:50 198阅读 0赞

# CSS 相关操作 #

### CSS()方法 ###

// 获取元素的css
        $("h1").css("font-size");
        
        // 设置css
        $("h1").css("font-size","14px");
        
        // 设置多个css属性
        $("h1").css({ "font-size"："14px","color":"red"});

### 位置 ###

**offset()**  
获取匹配元素在当前视口的相对偏移。  
返回的对象包含两个整形属性：top 和 left。

**position()**  
获取匹配元素相对父元素的偏移。  
返回的对象包含两个整形属性：top 和 left。

**scrollLeft()**  
获取匹配元素相对滚动条左侧的偏移; scrollLeft(300)  
设置元素相对滚动条左边的偏移值

**scrollTop()**  
获取匹配元素相对滚动条上边的偏移; scrollTop(300)  
设置元素相对滚动条上边的偏移值

### 案例 固定到顶部的导航 ###

html

<h3>offset 距离</h3>
    <div class="banner">banner</div>
    <div class="nav">nav</div>
    <p>line1</p>
    <p>line2</p>
    ...
    <p>line99</p>
    <p>line100</p>

// 思路：只要滚动的距离 大于 元素 nav 距页面顶部的距离 让 nav 固定定位 else 就 默认定位
    $(function(){ 
    	var offT=$(".nav").offset().top;
    	//nav 距离顶部的距离
    	$(window).scroll(function(){ 
    	//窗口发生滚动事件
    		var scrollT=$(window).scrollTop();
    		//窗口滚动条滚过去的距离
    		if(scrollT>offT){ 
    		//如果大于这个距离添加一个固定的class
    			$(".nav").addClass("fixed")
    			$("body").css("padding-top","50px")
    		}else{ 
    			$(".nav").removeClass("fixed")
    			$("body").css("padding-top","0")
    		}
    		
    	})
    })

CSS

.banner{  
        height:500px ;
        background-color:lightgreen;
    }
    
    .nav{  
        height: 50px; 
        background-color: lightsalmon;
    }
    
    .fixed{ 
        position: fixed;
        top: 0; 
        width: 100%;
        left: 0; 
        z-index: 10;
       /* 注意要写 z-index 不然会被遮盖到下面*/
    }

# 案例-导航下拉 #

作者：曾庆林  
html

<div class="nav" id="navigation">
           <ul>
             <li><a href="#">网站首页</a></li>
             <li><a href="#">关于我们</a>
                <ul>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">企业文化</a></li>
                </ul>
             </li>
             <li><a href="#">新闻资讯</a></li>
             <li><a href="#">产品中心</a>
                <ul>
    				<li>
    				    <a>消防器材</a>
                    	<ul>
        					<li><a href="#">照明系列</a></li>
        					<li><a href="#">防护系列</a></li>
        					<li><a href="#">破拆系列</a></li>
        					<li><a href="#">救生系列</a></li>
        					<li><a href="#">警戒系列</a></li>
        					<li><a href="#">其它系列</a></li>
    					</ul>
                    </li>
    				<li><a>工矿企业产品</a>
                    	 <ul>
    						<li><a href="#">照明系列</a></li>
    						<li><a href="#">机电设备系列 </a></li>
    						<li><a href="#">产品配件系列</a></li>
    					</ul>                                
    		     	</li>
    	       </ul>			
             </li>
             <li><a href="#">招贤纳士</a></li>
             <li><a href="#">客户留言</a></li>
             <li><a href="#">联系我们</a></li> 
           </ul>
         </div>

$(function(){ 
    	//只要 li（有ul）被hover 让里面的ul 下拉显示
    	//只要 li（有ul）被out 让里面的ul 隐藏
    	$("li:has(ul)").hover(function(){ 
    		var myul=$(this).children("ul");
    		if(myul.is(":animated")){ 
    			myul.stop(true,true);
    			// stop(停止到队列动画，并回到最终状态)
    		}
    		myul.slideToggle()//第一次显示 第二次隐藏，第三次显示
    	})
    	
    	
    })

> ie6 浏览器不支持除a以外元素的:hover 事件  
> css

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dt,dl,dd{ margin:0;padding:0;border:0;font-size:12px;font-family:"微软雅黑";}
    ul li{  list-style:none;}
    .nav{  width:980px; height:34px;margin-top:23px; margin:0 auto; }
    .nav ul{ width:980px; height:34px; background: #069;}
    .nav ul li{ width:140px; height:34px; background:  #069; float:left; position:relative;}
    .nav ul li a{ width:140px; height:34px; line-height:34px; text-align:center; display:block; color:#FFF; font-size:14px; text-decoration:none;}
    .nav ul li a:hover{  background-color:rgb(31,201,244);}
    .nav ul li ul{  position:absolute; left:0px; top:34px; width:140px; height:auto; display:none; }
    .nav ul li ul li{  float:none; position:relative;}
    .nav ul li ul li ul{  left:140px; top:0px; width:140px;}

![IT入门 感谢关注][IT_]

IT入门 感谢关注

练习地址： [www.520mg.com/it][www.520mg.com_it]

[IT_]: /images/20221123/df67642403e24e91a844fd5657121261.png
[www.520mg.com_it]: http://www.520mg.com/it