精华内容
下载资源
问答
  • 通过JavaScript调用CSS动画

    千次阅读 2020-06-21 13:00:14
    通过JavaScript调用CSS动画案例一:通过按钮开始和停止动画案例二:通过定时器停止动画 案例一:通过按钮开始和停止动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <...

    案例一:通过按钮开始和停止动画

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    		.animation {
    		    animation: move 2s infinite alternate;
    			border:1px solid;
    			width:100px;
    			height:100px;
    			margin-top:50px;
    		}
    		  
    		@keyframes move {
    		    0% {
    				transform: rotate(0deg) translate(-100px, 0); ;
    		    }
    		    100% {
    				transform: rotate(360deg) translate(100px, 0);
    		    }
    		}
    		
    		.btn:hover{
    			cursor: pointer;
    		}
    		</style>
    	</head>
    	<body>
    		<div class="btn">stop</div>
    		<div class="animation"></div>
    		<script type="text/javascript">
    			document.querySelector('.btn').addEventListener('click', function() {
                    //querySelector() 方法返回文档中匹配指定 CSS 选择器的第一个元素
    			    let btn = document.querySelector('.btn');
    			    let elem = document.querySelector('.animation');
    			    let state = elem.style['animationPlayState'];
    			      
    			    if(state === 'paused') {
    			        elem.style['animationPlayState'] = 'running';
    			        btn.innerText = 'stop';
    			    } else {
    			        elem.style['animationPlayState'] = 'paused';
    			        btn.innerText = 'play';
    			    }
    			});			
    		</script>
    	</body>
    </html>
    
    

    案例二:通过定时器停止动画

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    		.animation {
    		    animation: move 2s linear infinite alternate;
    			border:1px solid;
    			width:100px;
    			height:100px;
    		}
    		  
    		@keyframes move {
    		    0% {
    				transform: rotate(0deg);
    		    }
    		    100% {
    				transform: rotate(360deg);
    		    }
    		}
    		</style>
    	</head>
    	<body>
    		<div class="animation"></div>
    		<script type="text/javascript">
    			// 设置动画在600毫秒后暂停,这个时间值可以根据情况(要停止的位置)自己设置
    			setInterval("pausedMove()",600);
    			function pausedMove(){
    				let elem = document.querySelector('.animation');
    				//这样写也可以:elem.style.animationPlayState = 'paused';
    				elem.style['animationPlayState'] = 'paused';
    			}
    		</script>
    	</body>
    </html>
    
    
    展开全文
  • js调用css属性写法

    2020-12-12 06:06:54
    1、对于没有中划线的css属性一般直接使用style.属性名即可。 如:obj.style.margin,obj.style.width,obj.style.... 因为float是Javascript的保留字,那怎么在js中书写样式表中的float呢? 我们不能直接使用obj.styl
  • js调用两种css

    2012-11-22 16:04:42
    让一个类在事件触发时有两种css可以选择.
  • JS如何调用CSS样式表

    千次阅读 2016-09-28 15:50:33
    JS1: head=document.getElementsByTagName("head"); function js_on(){ var js=document.createElement("script"); js.type="text/javascript";...js.src="importcss.js"; head[0].appendChild(js); } window

    JS1:

    head=document.getElementsByTagName("head");
    function js_on(){
    var js=document.createElement("script");
    js.type="text/javascript";
    js.src="importcss.js";
    head[0].appendChild(js);
    }
    window.οnlοad=js_on; 

    JS2:importcss.js

    function js_onload(){
    var head=document.getElementsByTagName("head");
    var es=document.createElement("link");
    es.href='css/fbtd_home.css';
    es.rel="stylesheet";
    es.type="text/css";
    head[0].appendChild(es);
    var es1=document.createElement("link");
    es1.href='css/fbtd_common.css';
    es1.rel="stylesheet";
    es1.type="text/css";
    head[0].appendChild(es1);
    } 

    以上是通过JS结合DOM创建新的页面节点实现CSS或JS的调用,另外如果更换CSS的话也可以在页面写入所有的外部样式,然后通过更改样式的disabled属性(true/false)即可动态的更改样式

    展开全文
  • JavaScript如何调用CSS属性

    千次阅读 2015-10-12 20:43:14
    JavaScript如何调用CSS属性?1、margin、width、left obj.style.margin obj.style.width obj.style.left2、font-size、border-top-width、-moz-user-select obj.style.fontSize obj.style.borderTopWidth

    JavaScript如何调用CSS属性?


    1、JavaScript获取行内style里的样式


    (1)、margin、width、left
                obj.style.margin
                obj.style.width
                obj.style.left


    (2)、font-size、border-top-width、-moz-user-select
                obj.style.fontSize
                obj.style.borderTopWidth

                obj.style.mozUserSelect


    2、JavaScript获取行外部<style></style>里的样式

    (1)firefox中用getComputedStyle()方法

    <!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>JS获取行外部样式</title>
    <style type="text/css">
    	#body_div{
    		font-size:14px;
    		width:400px;
    		height:500px;
    	}
    </style>
    <script type="text/javascript">
    	function getStyle()
    	{
    		var div = document.getElementById("body_div");
    		var whole = document.defaultView.getComputedStyle(div,null);
    		alert(whole.fontSize);
    		alert(whole.width);
    		alert(whole.height);
    	}
    </script>
    </head>
    
    <body οnlοad="getStyle();">
       <div id="body_div" style="font-weight:bolder;">JS获取行外部样式</div>
    </body>
    </html>
    

    (2)IE浏览器用obj.currentStyle方法

    展开全文
  • 刚才看到一篇好的文章介绍js调用css属性,( ^_^ )不错嘛!免的自己忘记,总结一下1、对于没有中划线的css属性一般直接使用style.属性名即可。 如:obj.style.margin,obj.style.width,obj.style.left,obj.style....
  • 如何使用JS操作CSS

    千次阅读 2018-08-14 14:12:01
    方法: document.getElementById("... CSS语法(不区分大写和小写) JavaScript语法(区分大写和小写) border border border-bottom borderBottom border-bottom-color borderBottomColo...

    方法:

    document.getElementById("xx").style.xxx中的全部属性是什么

    盒子标签和属性对比
    CSS语法(不区分大写和小写)JavaScript语法(区分大写和小写)
    borderborder
    border-bottomborderBottom
    border-bottom-colorborderBottomColor
    border-bottom-styleborderBottomStyle
    border-bottom-widthborderBottomWidth
    border-colorborderColor
    border-leftborderLeft
    border-left-colorborderLeftColor
    border-left-styleborderLeftStyle
    border-left-widthborderLeftWidth
    border-rightborderRight
    border-right-colorborderRightColor
    border-right-styleborderRightStyle
    border-right-widthborderRightWidth
    border-styleborderStyle
    border-topborderTop
    border-top-colorborderTopColor
    border-top-styleborderTopStyle
    border-top-widthborderTopWidth
    border-widthborderWidth
    clearclear
    floatfloatStyle
    marginmargin
    margin-bottommarginBottom
    margin-leftmarginLeft
    margin-rightmarginRight
    margin-topmarginTop
    paddingpadding
    padding-bottompaddingBottom
    padding-leftpaddingLeft
    padding-rightpaddingRight
    padding-toppaddingTop
    颜色和背景标签和属性对比
    CSS 语法(不区分大写和小写)JavaScript 语法(区分大写和小写)
    backgroundbackground
    background-attachmentbackgroundAttachment
    background-colorbackgroundColor
    background-imagebackgroundImage
    background-positionbackgroundPosition
    background-repeatbackgroundRepeat
    colorcolor
     
    样式标签和属性对比
    CSS语法(不区分大写和小写)JavaScript 语法(区分大写和小写)
    displaydisplay
    list-style-typelistStyleType
    list-style-imagelistStyleImage
    list-style-positionlistStylePosition
    list-stylelistStyle
    white-spacewhiteSpace
     
    文字样式标签和属性对比
    CSS 语法(不区分大写和小写)JavaScript 语法(区分大写和小写)
    fontfont
    font-familyfontFamily
    font-sizefontSize
    font-stylefontStyle
    font-variantfontVariant
    font-weightfontWeight
     
    文本标签和属性对比
    CSS 语法(不区分大写和小写)JavaScript 语法(区分大写和小写)
    letter-spacingletterSpacing
    line-breaklineBreak
    line-heightlineHeight
    text-aligntextAlign
    text-decorationtextDecoration
    text-indenttextIndent
    text-justifytextJustify
    text-transformtextTransform
    vertical-align

    verticalAlign 

    展开全文
  • unigui_调用外部jscss

    2018-10-27 17:28:55
    unigui_调用外部js与cssunigui_调用外部js与cssunigui_调用外部jscss
  • 动态调用CSS文件,一般用于页面的多种颜色选择,通过调用不同的css实现不用的页面颜色效果。
  • 最近看一个网站,发现显示器不同的分辨率,样式文件调用的也不一样,今天写了一个例子研究一下, 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>无标题文档...
  • js调用css属性

    2013-09-19 14:50:53
    1、对于没有中划线的css属性一般直接使用style.属性名即可。   如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等。   2、对于含有中划线的css属性,将每个中划线去掉并...
  • cssjs调用方法

    千次阅读 2014-05-08 08:50:17
    css调用方法: 1. 链接样式表 同样是添加在HTML的头信息标识符里   2. 添加在HTML的头信息标识符里     3. 使用style属性对标签加载样式 使用css 这种方法虽然简单易用,但是不推荐使用这种方法...
  • 下面小编就为大家带来一篇常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • css调用方法: 1. 链接样式表 同样是添加在HTML的头信息标识符<head>里 复制代码代码如下: <head> <link rel=”stylesheet” type=”text/css” href=”style.css” /> </head> 2. 添加...
  • unigui_调用外部jscss.rar
  • 有个朋友在weibo上问我可不可以用JSCSS让页面每次刷新随机产生一张背景图,当然是可以的。具体的方法看下面的实现代码吧
  • js条件下多次触发同一个css3动画的解决方案demo,配合blog一起使用。js条件下多次触发同一个css3动画的解决方案demo,配合blog一起使用。
  • 关于在JavaScript调用css的两种方式

    千次阅读 2015-10-10 10:59:29
    代码示例如下: =================================              鼠标的悬停及移出事件 .one{ color:red ; border:6px solid green ;...如何通过JavaScript调用css: 方式一:通过style对象
  • javascript调用css样式表方法

    千次阅读 2010-09-11 14:08:00
    ... style.href = ’style.css’; style.rel = ’stylesheet’; style.type = ‘text/css’; document.getElementsB
  • function getBrowser() { var i = window.navigator.userAgent; var isChrome = i.indexOf("Chrome") && window.chrome; var issafari=i.indexOf("safari") && window....js判断不同浏览器内核调用不同css样式
  • js点击调用不同的css文件

    千次阅读 2017-11-28 17:22:53
    js调用不同的css var cssPath = "css/style"; (var cssPath = "00";...var styleID=0;document.write('');...//调用css文件夹下的style名的css var cssLink=document.getElementByIdx_x_x_x_x("cssLink");
  • unigui_调用外部jscss (1).rar
  • if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|BrowserNG|WebOS)/i))) { [removed]('<link href="css/mobile.css" rel="stylesheet" type=... }判断手机端访问调用css
  • js引用CSS 选择器

    千次阅读 2018-04-28 17:14:30
    document.getElementById(' ') //通过id获取一个元素,上下文只能是document,理论上页面上id是唯一的,但由 于操作错误写重复,不会报错,此时获取的是第一个。document.getElementsByName('') ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 332,940
精华内容 133,176
关键字:

js调用css