精华内容
下载资源
问答
  • js操作css
    2022-03-04 14:50:10

    今天我们来了解css的操作,并运用css实现更换样式,滑动广告,放大镜等功能

    1.操作css更换样式

    方法一:直接操作style

    方法二:操作calss

     <style>
    //定义a的样式
            .a{
                border: 10px solid green;   //添加边框,边框大小,实线,颜色为绿色
                box-shadow: 0px 0px 10px yellow;   //设置x,y,模糊度,颜色
            }
        </style>
    <body>
    <img id="m1" src="img/1.gif" alt="">   //插入图片
    <img id="m2" src="img/2.gif" alt="">
    <img id="m3" src="img/3.gif" alt="">
    <p>
        <button onclick="fn1()">点我添加边框</button>    //添加按钮
        <button onclick="fn2()">点我添加边框</button>
        <button onclick="fn3()">点我添加边框</button>
    </p>
    <script>
    function fn1() {       //定义函数
            //操作css的第一种方式:  直接操作style
            m1.style.border="5px solid black"    
            m1.style.width="40px"    //设置宽度
            m1.style.opacity=.5      //设置透明度
        }
    
        function fn2(){    
            m2.setAttribute("class","a")   //设置标签  设置m2class为a
        }
    //简写上面函数
        function fn3(){
            //class是关键字
            //标签中的class属性在js中都叫做className
            m3.className="a"
        }
    </script>
    </body>
    

    2.完成滑动广告

    <style>
            div{
                border: 2px solid black;
                /*绝对布局的特点:可以随便调整位置*/
                position: absolute;
               //绝对布局可定义属性 /*top bottom left right*/
                right: 20px;   //右边距
                top: 40px;     //上边距
                transition: .1s;   //设置滑动的时间
            }
        </style>
    <body>
    <div id="ad">
        <button onclick="ad.style.display='none'">x</button>   //设点击事件当点击x时div不显示
        <br>
        <img src="img/4.gif" alt="">
    </div>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <p>淘宝,淘你所爱</p>
    <script>
        //窗口的滑动事件
        window.onscroll=()=> {
            //获取到窗口滚动的距离 scrollTop
            ad.style.top=40+document.documentElement.scrollTop+"px"   //40是定义div时设置的,document.documentElement.scrollTop是获得滑动距离,px是单位
        }
    </script>  
    </body>

    3.完成放大镜效果

     onclick 点击事件
     ondblclick 点击事件
     onmouseover 鼠标移入事件
     onmouseout 鼠标移出事件
     onmousemove 鼠标移动事件

    <style>
            div{
                width: 100px;   //宽
                height: 100px;  //长
                background: red;    //背景颜色
                position: absolute;   //绝对布局
            }
        </style>
    <body>
    <div id="div"></div>
    <script>
        // onclick 点击事件
        // ondblclick 点击事件
        // onmouseover 鼠标移入事件
        // onmouseout 鼠标移出事件
        // onmousemove 鼠标移动事件
    
        window.onmousemove=(e)=>{    //鼠标移动事件
            //需要事件对象 Event
           // console.log(e.clientX,e.clientY)   //获得鼠标横纵坐标
            div.style.left=e.clientX-50+"px"     //使鼠标居中,div定义时为100
            div.style.top=e.clientY-50+"px"
        }
    </script>
    </body>

    3.1放大功能的完成

    <style>
            div{
                width: 300px;
                height: 300px;
                background: red;
                position: absolute;
                /*设置事件全部无效*/
                pointer-events: none;   //这是为了当鼠标处于div中也能实现移动
                display: none;       //开始时div不显示
            }
    
        </style>
    <body>
    <img id="m1" src="img/1.gif" alt="">
    <div id="div"></div>
    <script>
    m1.onmouseover=function (){  //鼠标移入事件
            div.style.display="block";    //当鼠标移入是显示
        }
    
        m1.onmouseout=function (){    //鼠标移出事件
            div.style.display="none"; //当鼠标移出时不显示
        }
    
        m1.onmousemove=(e)=>{
            //console.log(e.clientX,e.clientY)
            div.style.left=e.clientX-50+"px"
            div.style.top=e.clientY-50+"px"
            div.style.background="url("+m1.src+") center/cover"  //将背景图片放大大指定尺寸,居中铺满
        }
    </script>
    </body>

    更多相关内容
  • JavaScript 如何使用JS操作CSS

    千次阅读 多人点赞 2022-03-04 16:12:00
    家人们,新的一天新的知识点,我们要开启新的课程啦,今天带大家学习如何使用JS操作css,大家有不懂得可以私信我,或者在下方评论噢,现在就让我带你们进入知识的海洋中。 一.什么是css? Cascading Style Sheets...

     家人们,新的一天新的知识点,我们要开启新的课程啦,今天带大家学习如何使用JS操作css,大家有不懂得可以私信我,或者在下方评论噢,现在就让我带你们进入知识的海洋中。


    一.什么是css?

    •    Cascading Style Sheets 通常称为CSS样式表或层叠样式表(级联样式表)
    •    CSS用于控制网页的外观 (HTML是用于控制网页结构的,JS是控制网页的行为
    •    Css让界面变得更加美观                


    二.如何使用JS操作CSS

       1.直接操作style(样式)

    语法元素.style.样式名 = 样式值;

    注意:

    • 如果CSS的样式名中含有-这种名称在JS中是不合法的。
    • 比如background-color需要将这种样式名修改为驼峰命名法。
    • 去掉-,将-后的首字母大写   格式 : backgroundColor

    题目:操作style给图片设置边框

              我们通过做题目来了解如何操作style,给大家上代码,代码都有详细备注

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    	</head>
    	<body>
    		<img id="m1" src="img/1.gif">
    		
    		<br>
    		<button onclick="fn1()">点我添加边框</button>
    		
    	 
    	<script>
    	  function fn1(){
    		  // 操作css的第一种方法:直接操作style属性
    		  // 给他设置一个边框
    		  m1.style.border="5px solid black";
    		  //使他变小width
    		  m1.style.width="40px";
    		  // 透明度
    		  m1.style.opacity=.5;
    	  }
    	  
    	 
    	</script>
    	</body>
    	
    	
    </html>
    

      2.操作class属性

    题目:操作class属性设置边框

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    		/* class名 */
    		.a{
    			/* 边框大小 solid:实线  green:给边框设置颜色 */
    			border: 10px solid green;
    			box-shadow: 0px 0px 10px yellow;
    		}
    		
    		</style>
    		
    	</head>
    	<body>
    		
    		<img id="m2" src="img/2.gif">
    		<img id="m3" src="img/3.gif">
    		<br>
    	
    		<button onclick="fn2()">点我添加边框</button>
    		<button onclick="fn3()">点我添加边框</button>
    	 
    	<script>
    
    	  // 设置属性
    	  function fn2(){
    		  // setAttribute设置标签中的属性
    		 // 设置该标签的class属性名为a class="a";
    		  // 我们就可以具备了a里面的样式
    		  m2.setAttribute("class","a");
    	  }
    	  
    	  // 操作class属性
    	  function fn3(){
    		  // class是关键字
    		  // 标签中的class属性在js中叫做className;
    		  m3.className="a";
    	  }
    	</script>
    	</body>
    	
    	
    </html>
    


      三.代码实操

           题目一:完成一个类似广告的功能,广告跟着我们的滚动条移动

                       思路:1.我们要拿到滚动条移动的距离

                                  2.广告跟着滚动条移动这里只需要沿着Y轴运动

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    		div{
    		  border:2px solid black;
    		  /*绝对布局的特点:可以随便调整位置*/
    		    position: absolute;
               /*top bottom left right*/
    		   /* 离右边的距离为20px */
    			right: 20px;
    			/* 离左边的距离为40px */
    	        top: 40px;
    			/* 移动间隔时间,可以不设置 */
    			transition: .1s; 
    		}
    		
    		</style>
    	</head>
    	<div id="d1">
    		<!-- 点击事件,点击时关闭广告 -->
    	<span onclick='d1.style.display="none"'>x</span>
    	<br>
    	<img src="img/4.gif">
    	</div>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	<p>哈哈哈</p>
    	
    	<script>
    	// 想让图片跟着滚动条运动
    	// <window:窗口 -->
    	   window.onscroll=()=>{
    		//获取到窗口滚动的距离 scrollTop
    		d1.style.top=40+document.documentElement.scrollTop+"px"
    	   }
    	</script>
    	
    	</body>
    </html>
    

     题目二:让一个东西跟着鼠标移动

                 

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    		div{
    			/* 设置大小 */
    			width:180px;
    			height:180px;
    			background:red;
    			 position: absolute;
    		}
    		
    		</style>
    	</head>
    	<body>
    		<div id="d1"></div>
    		
    		<script>
    		window.onmousemove=(e)=>{
    			// 拿到鼠标的x和y轴
    			// 让div跟着鼠标运动
    			// d1.style.left=e.clientX+"px";
    			// d1.style.top=e.clientY+"px";
    			
    			// 如果想要我们鼠标在div的中间
    			// 减去中间的大小的一半,使鼠标在div正中间
    			d1.style.left=e.clientX-90+"px";
    			d1.style.top=e.clientY-90+"px";
    			
    		}
    				
    		</script>
    	</body>
    </html>

    题目三:放大镜功能

        

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    		div{
    			/* 设置大小 */
    			width:300px;
    			height:300px;
    			background: red;
    			position: absolute;
    			 /*设置事件全部无效*/
    			 /* 因为我们 */
    			 pointer-events: none;
    			 display:none;
    			}
    			</style>
    	</head>
    	<body>
    		<img id="m1" src="img/1.gif">
    		<div id="div"></div>
    		
    		<script>
    		// 当移入到图片时显示出来
    		m1.onmouseover=(e)=>{
    			div.style.display="block";
    		}
    		
    		// 当从图片移出时图片消失
    		m1.onmouseout=(e)=>{
    			div.style.display="none";
    		}
    		
    		// 鼠标移动事件,当移入到图片的时候,div变成该图片
    		// 只在图片上面移动
    		m1.onmousemove=(e)=>{
    			div.style.left=e.clientX-50+"px";
    			div.style.top=e.clientY-50+"px";
    			// 当他移动到我们的图片上面时,我们让div变成图片的呀样子
    			// url位置的意思 来自于图片的src属性,拿到图片
    			// center/cover平铺的意思
    			div.style.background="url("+m1.src+")  center/cover";
    		}
    		
    		</script>
    	</body>
    </html>
    

      

    展开全文
  • 主要介绍了js操作css属性实现div层展开关闭效果的方法,涉及javaScript操作css样式实现div弹出层的效果,非常具有实用价值,需要的朋友可以参考下
  • 使用js操作css

    2022-03-04 16:54:53
    JavaScript如何操作css

    一、通过js修改元素样式

    1. 直接操作style

    <img id="m1" src="img/1.gif" >
    <p>
    	<button onclick="fun01()">点我添加边框</button>
    </p>
    function fun01(){
    	//操作CSS的第一种方式:直接操作style
    	m1.style.border="5px solid black" //实现5px黑色边框
    	m1.style.width="100px" //宽度
    	m1.style.opacity=.5 //透明度
    }

    2.根据class属性操作 

    <style>
    		.a{
    			border: 10px solid aqua;
    			box-shadow: 0px 0px 10px aquamarine;
    		}
    </style>
    <img id="m2" src="img/2.gif" >
    <img id="m3" src="img/3.gif" >
    <p>
    	<button onclick="fun02()">点我添加边框</button>
    	<button onclick="fun03()">点我添加边框</button>
    </p>
    function fun02(){
    		m2.setAttribute("class","a")
    	}
    			
    function fun03(){
    		//class是关键字 标签中的class属性在js中都叫做className
    		m3.className="a"
        }

    操作前: 

    操作后 

    fun02() 和 fun03() 这两个函数是同样的操作,只是写法不同,标签中class属性在js中都叫做className。

    二、 图片跟随滚动条

    学会了图片跟随滚动条,相当于实现了广告的效果,话不多说,咱直接上代码

    <style>
    	div{
    		border: 2px solid black;
    		/* 绝对布局的特点:可以随便调整位置,top bottom left right */
    		position: absolute; 
    		right: 20px;
    		top: 40px;
    		transition: .1s;
    	}
    </style>
    
    <div id="ad">
    	<!-- 当点击按钮时,把div隐藏,也就是关闭广告 -->
    	<button onclick="ad.style.display='none'">X</button>
    	<br>
    	<img src="img/0.jpg" >
    </div>
    
    <p><img src="img/1.gif" ></p>
    <p><img src="img/2.gif" ></p>
    <p><img src="img/3.gif" ></p>
    <p><img src="img/4.gif" ></p>
    <p><img src="img/5.gif" ></p>
    <p><img src="img/6.gif" ></p>
    <p><img src="img/7.jpeg" ></p>
    <p><img src="img/8.jpeg" ></p>
    <p><img src="img/9.jpeg" ></p>
    <p><img src="img/10.jpeg" ></p>
    <p><img src="img/11.jpeg" ></p>
    <p><img src="img/12.jpeg" ></p>
    <p><img src="img/13.jpeg" ></p>
    <p><img src="img/14.jpeg" ></p>

     看以上代码可以看到我插入了很多的图片,插入大量图片是为了实现可以滚动的效果,div是那个广告,接下来我们来实现图片跟着滚动条的效果

    <script type="text/javascript">
    	//窗口滑动事件
    	window.onscroll=()=>{
    	//获取到窗口滚动的距离 scrollTop
    	ad.style.top=40+document.documentElement.scrollTop+"px"
    	}
    </script>

    看图片可以得知,所谓的广告已经随着滚动条移动了 

    三、方块随着鼠标移动

    我们需要知道几个关于鼠标事件的单词

    onclick点击事件
    ondblclick 双击事件
    onmouseover 鼠标移入事件
    onmouseout 鼠标移出事件
    onmousemove 鼠标移动事件

    接下来是我们的代码展示 

    <style>
    	div{
    		width: 100px;
    		height: 100px;
    		background: aqua;
    		/* 绝对布局 */
    		position: absolute;
    	}
    </style>
    
    <div id="div"></div>
    <script>
            window.onmousemove=(e)=>{  //e是事件对象
    		//拿到鼠标的x轴
    		div.style.left=e.clientX-50+"px"	//减去50是为了让鼠标位于方块中间
    		//拿到鼠标的y轴
    		div.style.top=e.clientY-50+"px"
    	}
    </script>

    效果不好展示出来,大家自行去试试吧

    四、 图片放大镜

    根据以上案例,我们还能实现图片放大的功能

    <style type="text/css">
    	div{
    		width: 300px;
    		height: 300px;
    		background: url(img/4.gif);
    		position: absolute;
    		pointer-events: none;
    		display: none;
    	}
    </style>
    
    <img id="m1" src="img/4.gif" >
    <div id="div"></div>
    <script>
        //鼠标移入显示
    	m1.onmouseover=function (){
    			 div.style.display="block";
    		}
    		
        //鼠标移出隐藏	
    	m1.onmouseout=function (){
    			div.style.display="none";
    		}
    
    	// 鼠标移动事件
    	window.onmousemove=(e)=>{
    		div.style.left=e.clientX-50+"px"
    		div.style.top=e.clientY-50+"px"
    		div.style.background="url("+m1.src+") center/cover"
    	    }
    </script>

    当鼠标移入到图片上,给图片放大,鼠标移出图片放大功能无效。 

    展开全文
  • jsstyle 尝试在一个对象中定义所有 CSS,然后循环遍历它以将其应用于 DOM。 当媒体查询存在时并不是很有用,但它可能是另一个 CSS 处理库的开始。
  • 有个朋友在weibo上问我可不可以用JSCSS让页面每次刷新随机产生一张背景图,当然是可以的。具体的方法看下面的实现代码吧
  • javascript操作css属性

    2020-10-26 11:28:07
    今天因需要用到js获取css属性,网上搜了半天都不合适的。有一下几种方法
  • js 操作css实现代码

    2020-11-30 22:47:52
    当我们需要的是一条规则的时候,总不能在每次dom发生变化的时候去执行这个操作,否则也太效率低下了。好在dom中css rules也是可以修改的。不过不同浏览器的对于css rules的接口描述也不同,其中ie中以类似hash table...
  • JavaScript之如何操作css

    2022-03-04 17:13:34
    我们这一次没有太多的内容要讲( ̄▽ ̄)",主要是理解如何操作css,然后多几个举例,各位小伙伴们可以看一看呦╰( ̄ω ̄o) 一.css选择器 div{————选择器 color:rad-----样式规则 } id选择器 #a{ id选择器...

    目录

    一.css选择器

            二.如何操作css

    方法一:直接操作样式(style) 

    方法二:操作class

     三.例题

    我们这一次没有太多的内容要讲( ̄▽ ̄)",主要是理解如何操作css,然后多几个举例,各位小伙伴们可以看一看呦╰( ̄ω ̄o)

    一.css选择器

    div{————选择器
    color:rad-----样式规则
    }

    id选择器

    #a{
    id选择器需要在选择器前加#
    }

    class选择器

    .a{
    class选择器需要在选择器前面加一个点
    }

    标签(Tag)选择器

    例如
    p{
    }
    或者
    input{
    }
    这样的标签

     选择器的优先级:id选择器>class选择器>标签选择器

    二.如何操作css

    方法一:直接操作样式(style) 

    方法二:操作class

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    		.a{//class选择器
    			border: 5px solid skyblue;
    			box-shadow: 0px 0px 10px gold;
    		}
    		</style>
    	</head>
    	<body>
    		<img id="a1" src="img/1.gif" />
    		<img id="a2" src="img/2.gif" />
    		<img id="a3" src="img/3.gif" />
    		
    		<p>
    			<button onclick="fn1()">添加边框</button>
    			<button onclick="fn2()">添加边框</button>
    			<button onclick="fn3()">添加边框</button>
    		</p>
    		<script>
    		
    		function fn1(){
    			//操作css的第一种方式:直接操作style
    			//border边框,solid实线,opacity透明度
    			a1.style.border="5px solid black"
    			a1.style.which="50px"
    			a1.style.opacity=.5
    		}
    		
    		function fn2(){
    			//第二种方式:操作class
    			//setAttribute设置值
    			a2.setAttribute("class","a")
    		}
    		
    		function fn3(){
    			//第二种方式的简写
    			//class是关键字,标签中的class属性在js中写作className
    			a3.className="a"
    		}
    		
    		
    		</script>
    	</body>
    </html>

     class是关键字,标签中的class属性在js中写作className

     三.例题

     相信各位小伙伴们用电脑打开浏览器总会有小广告,我们滑动滑轮这些小广告也会跟着滑动,根据操作css,我们也可以完成滚动广告,让我们试一试吧 

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    		div{//标签选择器
    		            border: 2px solid black;
    		            /*为了让图片不遮住文字,我们可以设置绝对布局
    		            绝对布局的特点:可以随便调整位置*/
    		            position: absolute;
    		           /*绝对布局有四个属性,分别是top,bottom,left,right
    		           距离右边框20px,距离顶部40px*/
    		            right: 20px;
    		            top: 40px;
    		            transition: .1s;
    		        }
    		</style>
    	</head>
    	<body>
    		<div id="ad">
    		<button onclick="ad.style.display='none'">x</button>
    		<br>
    		<img src="img/5.gif">
    		</div>
                //这里的内容是随便写的不要在意
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    			<p>买它买它</p>
    	<script type="text/javascript">
    	//为了让广告可以跟着下拉框滑动,我们需要写一个窗口的滑动事件
    	window.onscroll=()=>{
    		//获得窗口滑动的距离 scrollTop
    		ad.style.top=40+document.documentElement.scrollTop+"px"
    	}
    	</script>
    	</body>
    </html>

    运行结果: 

    让图片跟随鼠标移动

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background: red;
                //绝对布局
                position: absolute;
            }
        </style>
    </head>
    <body>
    <div id="div"></div>
    <script>
        // onclick 点击事件
        // ondblclick 点击事件
        // onmouseover 鼠标移入事件
        // onmouseout 鼠标移出事件
        // onmousemove 鼠标移动事件
    
        window.onmousemove=(e)=>{
            //需要事件对象 Event
            console.log(e.clientX,e.clientY)
            //让鼠标箭头位于中心
            div.style.left=e.clientX-50+"px"
            div.style.top=e.clientY-50+"px"
        }
    </script>
    </body>
    </html>

    这是一个简单的放大镜

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 300px;
                height: 300px;
                background: red;
                position: absolute;
                /*设置事件全部无效*/
                pointer-events: none;
                display: none;
            }
    
        </style>
    </head>
    <body>
    <img id="m1" src="img/1.gif" alt="">
    <div id="div"></div>
    <script>
        // onclick 点击事件
        // ondblclick 点击事件
        // onmouseover 鼠标移入事件
        // onmouseout 鼠标移出事件
        // onmousemove 鼠标移动事件
    
        m1.onmouseover=function (){
            div.style.display="block";
        }
    
        m1.onmouseout=function (){
            div.style.display="none";
        }
    
        m1.onmousemove=(e)=>{
            //需要事件对象 Event
            console.log(e.clientX,e.clientY)
            div.style.left=e.clientX-50+"px"
            div.style.top=e.clientY-50+"px"
            div.style.background="url("+m1.src+") center/cover"
        }
    </script>
    </body>
    </html>

    运行结果:

     

    展开全文
  • js操作css—class

    2020-10-29 15:50:53
    <!... <... <...js操作css—class</title> <style type="text/css"> .b1{ width: 100px; height: 100px; background-color: red; } .b2{ height: 300p
  • <!... <... <head> ...meta charset="utf-8" />...meta name="viewport" content="width=device-width, initial-scale=1">...style type="text/css"> :root { --bg: white; } .
  • JavaScript 操作CSS

    2019-03-18 01:04:53
    NULL 博文链接:https://zhouxianglh.iteye.com/blog/588385
  • 通过JS操作CSS

    2020-08-18 23:14:30
    通过jss操作css操作方法 操作方法 1.通过style属性来修改css DOM Style对象 标签对象.style.CSS属性="值"; 如:var ziti = document.getElementById('test'); ziti.style.color = 'red'; 注意:在JavaScript...
  • 一、使用js操作css属性的写法 1、对于没有中划线的css属性一般直接使用style.属性名即可。 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position 2、对于含有中划线的css属性,将每个中划线...
  • 指的是通过JavaScript操作一个元素的CSS样式 获取CSS属性值 getComputedStyle(obj).attr / getComputedStyle(obj)['attr'] 两种写法一样 attr表示css属性名,但必须写成驼峰型,如font-size应该写成fontSize,...
  • 主要介绍了JS实现css hover操作的方法,涉及javascript事件响应及页面元素css属性动态操作相关技巧,需要的朋友可以参考下
  • js4 使用ES6 JavaScript编写CSS。 安装 npm install -g js4 # may require sudo 用法 用JS在文件中编写CSS,例如css.js : ...现在,您可以使用JSCSS中进行高级操作,例如声明或作用域: con
  • 无标题文档
  • JSCSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的,下面是具体的实现思路,感兴趣的朋友可以参考下
  • 在学习如何使用JavaScript操作CSS颜色之前,我们需要对CSS如何设置颜色有一个基本的了解。CSS设置颜色模式有多种,最为常见的模型有:RGB和HSL。我们先来看一下这两种颜色模式。颜色模式RGBRGB是red、green和blue三...
  • 想在CSS中使用JS变量 解决方案: CSS变量 示例: 以在 vue 项目为例: 在行内的 style 属性中定义 CSS 变量 赋值为 JS 变量 在 CSS 中使用行内定义好的 CSS 变量 <!--html--> <div class="container">...
  • 使用JS操作CSS实现JS改变背景图片

    千次阅读 2021-03-12 19:30:57
    使用JS操作CSS实现JS改变背景图片 在写一个后台管理系统的界面时候,想要实现每次刷新界面或者访问界面时候会重新加载一张图片并且每次都不一样,于是乎就去想了个方法去实现它,最终方案是通过js来改变div的css属性...
  • JavaScript如何操作css

    2021-01-18 16:40:41
    原本应该是由css进行控制html中的div的宽高和背景颜色,但是在下方使用了JavaScript进行重新调用了div盒子,并且覆盖了css原本的属性内容。 需求目标:由 100 像素的粉色背景色的div盒子变成了 300像素的橘黄色效果的...
  • JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性。这类 API 的例子包括WebGL API、Canvas API、DOM API,还有一组不太为人所知的 CSS API。 由于...
  • 我们用js书写css样式通常会用下面的两种方式: 一般情况下我们用js设置元素对象的样式会使用这样的形式: 代码如下:var element= document.getElementById(”id”); element.style.width=”20px”; element.style....
  • 使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改; 1.v-bind:class || v-bind:style 其中v-bind是指令,: 后面的class 和style是参数,而class之后的指在vue的官方文档里被称为’指令预期...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 480,961
精华内容 192,384
关键字:

js操作css

友情链接: LeNet5.zip