JS基础-获取当前元素的样式&&其他样式相关的属性

约定不等于承诺〃 2022-03-22 09:47 465阅读 0赞

1.利用currentStyle方法来获取当前元素的样式

2.利用getComputedStyle()方法来获取当前元素的样式  
说明： currentStyle和getComputedStyle这两个方法只能读不能修改，如果要修改必须通过style属性

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>获取元素当前样式练习</title>
    <style type="text/css">
    #box1
    {
    	width:100px;
    	height:100px;
    	background-color:#F00;
    }
    </style>
    <script>
    window.function()
    {
    	//获取box1样式
    	var box=document.getElementById("box1");
    	//获取btn样式
    	var btn=document.getElementById("btn1");
    	//单击响应事件
    	btn.onclick=function()
    	{
    		//在其他浏览器中可以使用getComputedStyle()这个方法来获取当前的样式，这个方法是window方法可以直接使用需要有两个参数第一个，需获取样式的元素。第二个，可以传递一个伪元素，一般都是null
    		var obj=getComputedStyle(box,null);
    		alert(obj.backgroundColor);
    		//该方法会返回一个对象，对象中封装了当前元素对应的样式可以通过，对象.样式名来获取当前样式
    		//如果获取到的样式没有设置，则会获取到真实值而不是默认值（此点与currentStyle不同）例，没有设置width的值，则会返回一个值而不是auto
    		//该方法不支持IE8及以下浏览器
    		};
    	};
    </script>
    </head>
    <body>
    <button id="btn1">点击一下</button>
    <br/><br/><br/>
    <div id="box1"></div>
    </body>
    </html>

3.自定义getStyle()方法来获取当前元素的样式

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>获取元素当前样式练习</title>
    <style type="text/css">
    #box1
    {
    	width:100px;
    	height:100px;
    	background-color:#F00;
    }
    </style>
    <script>
    window.function()
    {
    	//获取box1样式
    	var box=document.getElementById("box1");
    	//获取btn样式
    	var btn=document.getElementById("btn1");
    	//单击响应事件
    	btn.onclick=function()
    	{
    	  alert(getStyle(box,"width"));
    	};
    	};
    //定义一个函数用来获取指定元素的当前样式，参数，obj代表需获取样式的元素，name代表需获取的样式名
    function getStyle(obj,name)
    {
    	if(window.getComputedStyle)
    	{
    		//正常浏览器有getComputedStyle()方法
    	return getComputedStyle(obj,null)[name];
    	}
    	else
    	{
    		//IE8的浏览器没有getComputedStyle()方法
    	return obj.currentStyle[name];
    	}
    }
    </script>
    </head>
    <body>
    <button id="btn1">点击一下</button>
    <br/><br/><br/>
    <div id="box1"></div>
    </body>
    </html>

4.clientWidth/clientHeight

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>其他样式相关的属性练习</title>
    <style type="text/css">
    #box1
    {
    	width:200px;
    	height:100px;
    	background-color:#F00;
    	padding:10px;
    	border:10px solid #6CF;
    }
    </style>
    <script>
    window.function()
    {
    	//获取box1样式
    	var box=document.getElementById("box1");
    	//获取btn样式
    	var btn=document.getElementById("btn1");
    	//单击响应事件
    	btn.onclick=function()
    	{
    		//clientWidth,clientHeight这两个属性可以获取元素的可见高度和宽度，并且这些属性都不带px,返回的都是一个数字，可以直接进行计算（这两个属性只能读不能修改）
    		//会获取元素宽度和高度，包括内容区和内边距，不包括border（边框）
    		alert(box.clientWidth);
    		
    	};
    	};
    </script>
    </head>
    <body>
    <button id="btn1">点击一下</button>
    <br/><br/><br/>
    <div id="box1"></div>
    </body>
    </html>

5.offsetWidth/offsetHeight

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>其他样式相关的属性练习</title>
    <style type="text/css">
    #box1
    {
    	width:200px;
    	height:100px;
    	background-color:#F00;
    	padding:10px;
    	border:10px solid #6CF;
    }
    </style>
    <script>
    window.function()
    {
    	//获取box1样式
    	var box=document.getElementById("box1");
    	//获取btn样式
    	var btn=document.getElementById("btn1");
    	//单击响应事件
    	btn.onclick=function()
    	{
    		//offsetWidth,offsetHeight这两个属性可以获取元素整个的高度和宽度，并且这些属性都不带px,返回的都是一个数字，可以直接进行计算（这两个属性只能读不能修改）
    		//会获取元素宽度和高度，包括内容区和内边距并且包括border（边框）
    		alert(box.offsetWidth);	
    	};
    	};
    </script>
    </head>
    <body>
    <button id="btn1">点击一下</button>
    <br/><br/><br/>
    <div id="box1"></div>
    </body>
    </html>

6.offsetParent

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>其他样式相关的属性练习</title>
    <style type="text/css">
    #box1
    {
    	width:200px;
    	height:100px;
    	background-color:#F00;
    	padding:10px;
    	border:10px solid #6CF;
    }
    </style>
    <script>
    window.function()
    {
    	//获取box1样式
    	var box=document.getElementById("box1");
    	//获取btn样式
    	var btn=document.getElementById("btn1");
    	//单击响应事件
    	btn.onclick=function()
    	{
    		//offsetParent可以用来获取当前元素的定位元素，会获取到离当前元素最近的开启了定位的祖先元素
    		var op=box.offsetParent;
    		alert(op.id);
    		
    	};
    	};
    </script>
    </head>
    <body>
    <button id="btn1">点击一下</button>
    <br/><br/><br/>
    <div id="box3" style="position:relative">
    <div id="box2" style="position:relative">
    <div id="box1"></div>
    </div>
    </div>
    </body>
    </html>

7.offsetLeft/offsetTop

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>其他样式相关的属性练习</title>
    <style type="text/css">
    #box1
    {
    	width:200px;
    	height:100px;
    	background-color:#F00;
    	padding:10px;
    	border:10px solid #6CF;
    }
    #box2
    {
    	width:300px;
    	height:300px;
    	background-color:#0F0;
    	padding:50px;
    }
    </style>
    <script>
    window.function()
    {
    	//获取box1样式
    	var box=document.getElementById("box1");
    	//获取btn样式
    	var btn=document.getElementById("btn1");
    	//单击响应事件
    	btn.onclick=function()
    	{
    		//offsetLeft当前元素相对于定位元素的水平偏移量
    		//offsetTop当前元素相对于定位元素的垂直偏移量
    		alert(box.offsetLeft);	
    	};
    };
    </script>
    </head>
    <body>
    <button id="btn1">点击一下</button>
    <br/><br/><br/>
    <div id="box3" style="position:relative">
    <div id="box2" style="position:relative">
    <div id="box1"></div>
    </div>
    </div>
    </body>
    </html>

8.scrollWidth/scrollHeight

在这里插入代码片<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>其他样式相关的属性练习</title>
    <style type="text/css">
    #box4
    {
    	width:400px;
    	height:400px;
    	background-color:#C66;
    	overflow:auto;
    }
    #box5
    {
    	width:350px;
    	height:500px;
    	background-color:#F60;
    }
    </style>
    <script>
    window.function()
    {
    	//获取box4样式
    	var box=document.getElementById("box4");
    	//获取btn样式
    	var btn=document.getElementById("btn1");
    	//单击响应事件
    	btn.onclick=function()
    	{
    		//scrollWidth可以获取元素整个滚动区域的宽度
    		//scrollHeight可以获取元素整个滚动区域的高度
    		alert(box.scrollHeight);
    			};
    	};
    </script>
    </head>
    <body>
    <button id="btn1">点击一下</button>
    <br/><br/><br/>
    <div id="box4">
    <div id="box5"></div>
    </div>
    </body>
    </html>

9.scrollLeft/scrollTop

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>其他样式相关的属性练习</title>
    <style type="text/css">
    #box4
    {
    	width:400px;
    	height:400px;
    	background-color:#C66;
    	overflow:auto;
    }
    #box5
    {
    	width:350px;
    	height:500px;
    	background-color:#F60;
    }
    </style>
    <script>
    window.function()
    {
    	//获取box4样式
    	var box=document.getElementById("box4");
    	//获取btn样式
    	var btn=document.getElementById("btn1");
    	//单击响应事件
    	btn.onclick=function()
    	{
    		//scrollLeft可以获取水平滚动条滚动的距离
    		//scrollTop可以获取垂直滚动条滚动的距离
    		alert(box.scrollTop);
    		**//特别说明：**
    		//alert(box.clientHeight);400
    		alert(box.scrollHeight-box.scrollTop);
    		//当满足scrollHeight-scrollTop==clientHeight时说明垂直滚动条滚动到底了
    		//当满足scrollWidth-scrollLeft==clientWidth时说明水平滚动条滚动到底了
    	};
    	};
    </script>
    </head>
    <body>
    <button id="btn1">点击一下</button>
    <br/><br/><br/>
    <div id="box4">
    <div id="box5"></div>
    </body>
    </html>

10.垂直滚动条滚动到底的实例

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>练习</title>
    <style type="text/css">
    #info
    {
    	width:300px;
    	height:500px;
    	background-color:#3CC;
    	overflow:auto;
    }
    
    </style>
    
    <script type="text/javascript">
    window.function()
    {
    	//当垂直滚动条滚动到底时表单可以使用
    	//onscroll（该事件会在元素的滚动条滚动时触发）
    	//获取id为info的p标签
    	var info1=document.getElementById("info");
    	//获取表单项		
       var obj=document.getElementsByTagName("input");
    	//为p标签绑定一个滚动事件
    	info1.onscroll=function()
    	{
    		//判断滚动条是否滚动到底
    		if(info1.scrollHeight-info1.scrollTop==info1.clientHeight)
    		{
    			//滚动到底时，表单可以使用
    			//diaabled属性可以设置一个元素是否可用，如果设置为true，则元素禁用，如果设置为false则元素可用
    			obj[0].disabled=false;
    			obj[1].disabled=false;
    			
    		}	
    	};
    };
    </script>
    </head>
    <body>
    <h3>欢迎您的注册</h3>
    <p id="info">
    感谢您申请商标圈账户！在成为商标圈用户之前，请您仔细阅读以下条文，确保您理解
    您同意本协议并注册成功即成为商标圈的注册用户直至您的账户注销。商标圈可能在必要的时候对本协议条款及商标圈各单项服务协议进行更改，此种更改在商标圈上公布或在具体服务过程中经双方以口头、书面等形式协商一致生效。您可以选择停止使用商标圈相关的服务或者注销您在商标圈的账户，否则商标圈将认为您同意更改后的服务条款。未在商标圈发布或在具体服务过程中未经商标圈告知的服务条款将不具有法律效力，除非签有书面协议，并且仅对签署协议的当事人有效。户
    您应当拥有中华人民共和国法律认可的完全民事权利能力和完全民事行为能力，否则您和能够代表您行使权利或承担责任的其他主体将承担一切后果。为此，您应当提供相应的证明。如果您是自然人，此类证明可以是您的居民身份证件、个人户营业执照。如果您是法人，此类证明可以是您的营业执照。如果您是其他组织类型，您应当提供相应的合法证明。
    如果使用商标圈提供的各单项服务，您可能还需要提交其他相关的资料和信息。为了提供更好的服务，您也可以向我们提供其他资料和信息，我们将按照商标圈的隐私政策保护您的资料和信息。
    您应当保护好您的账户，除非已经得到您的提前通知，商标圈将认为您的账户处于您的控制之下。如果您的账户在不受您控制的情况下处于风险状态或者已经发生损失，请您及时以有效方式通知商标圈，您可以要求商标圈暂停服务或者冻结账户。
    如果您使用商标圈账户直接访问其他网站，您应当遵守该网站的服务条款。
    1、商标圈帐号的所有权归商标圈所有，用户完成申请注册手续后，获得商标圈帐号的使用权，该使用权仅属于初始申请注册人，禁止赠与、借用、租用、转让或售卖。商标圈因经营需要，有权回收用户的商标圈帐号。
    2、用户可以更改、删除商标圈帐户上的个人资料、注册信息及传送内容等，但需注意，删除有关信息的同时也会删除用户储存在系统中的文字和图片。用户需承担该风险。
    3、用户有责任妥善保管注册帐号信息及帐号密码的安全，因用户保管不善可能导致遭受盗号或密码失窃，责任由用户自行承担。用户需要对注册帐号以及密码下的行为承担法律责任。用户同意在任何情况下不使用其他用户的帐号或密码。在用户怀疑他人使用其帐号或密码时，用户同意立即通知商标圈。
    4、用户应遵守本协议的各项条款，正确、适当地使用本服务，如因用户违反本协议中的任何条款，商标圈在通知用户后有权依据协议中断或终止对违约用户商标圈帐号提供服务。同时，商标圈保留在任何时候收回商标圈帐号、用户名的权利。
    5、如用户注册商标圈帐号后一年不登录，通知用户后，商标圈可以收回该帐号，以免造成资源浪费，由此造成的不利后果由用户自行承担。任
    用户使用商标圈必须遵守所有适用的国家法律、地方法规和国际准则。用户对用户账户进行的一切操作及言论负完全的责任，用户注销账户后，仍然应当对注销前的操作和言论负责
    用户须承诺不传输任何非法的、骚扰性的、中伤他人的、辱骂性的、恐吓性的、伤害性的、庸俗的，淫秽等信息资料。用户也不能传输任何教唆他人构成犯罪行为的资料。不得进行任何有可能对商标圈的系统造成任何不良的影响的操作，不能传输助长国内不利条件和涉及国家安全的资料。不能传输任何不符合当地法规、国家法律和国际准则的资料。未经许可而非法进入其它电脑系统是禁止的。若用户的行为不符合以上提到的服务条款，商标圈单方面有权冻结或注销用户账户。用户需对用户本身在网上的行为承担法律责任。用户若在商标圈上散布和传播反动、色情或其他违反国家法律的信息，商标圈的系统记录有可能作为用户违反法律的证据。
    如果用户发现任何人违反本协议约定或以其他不当的方式使用本服务，请立即向商标圈举报或投诉，商标圈将依本协议约定进行处理。
    商标圈为用户提供商标交易、商标论坛等相关服务各项服务。用户应当按照商标圈的服务规则和页面提示进行操作，也可以直接联系商标圈获取更多的服务。商标圈各单项服务协议与本协议冲突或是有特别规定的，应当优先适用各单项服务协议。
    商标圈的各项服务费用在商标圈上公布，商标圈有权根据有关政策的变化、市场情况、服务范围变化等原因，单方面调整价格标准，调整的项目将在商标圈上更新，不作额外的通知。商标圈有权拒绝为不按照商标圈要求提供信息或不服从商标圈服务规则的用户提供服务，有权注销或者冻结该用户账户。
    用户有权取回用户在商标圈账户中未使用的资金，但不得利用商标圈资金账户套现信用卡资金，不得有其他违反银行、支付中介机构及商标圈资金规范的行为。用户在商标圈账户消费的的订单将提供明细以供查询的资金不产生任何形式的孳息。
    商标圈的数据来源于互联网，版权归源网站所有
    因下列情形无法按照约定提供各项服务时，商标圈不承担责任，包括但不限于：
    用户不得擅自在全球任何国家和地区申请与商标圈及其他服务的名称、标识、品牌、特色标志、域名相同或类似的商标、服务商标、域名、著作权等。用户不得擅自使用、复制、修改、改编、翻译、汇编、转载、发行商标圈所有内容，包括但不限于文字作品、图片作品、摄影作品、示意图、网站架构、网站画面的安排、网页设计
    </p>
    <input type="checkbox" disabled="disabled">我已阅读协议，并同意该协议
    <input type="submit" value="注册" disabled="disabled">
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]: /images/20220322/eacc04e5e62946c8908b1a7b0143c321.png