1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>其他样式相关的属性</title>
6 </head>
7 <script type="text/javascript">
8 window.onload=function()
9 {
10 var box1=document.getElementById("box1");
11 var box2=document.getElementById("button1");
12 var box4=document.getElementById("box4");
13 button1.onclick=function(){
14 /*
15 clientWidth
16 clientHeight
17 这两个属性可以获取元素的可见宽度和高度，包括内容区和内边距
18 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
19 这些属性都是只读的不能修改
20
21 offsetWidth
22 offsetHeight
23 获取元素的整个的宽度和高度，包括内容区，内边距和边框
24 */
25 alert(box1.clientWidth);
26 alert(box1.offsetWidth);
27 /*
28 offsetParent
29 可以用来获取当前元素的定位父元素
30 会获取到离当前最近的开启了定位的祖先元素
31 如果所有的祖先元素都没有开启定位，则返回body
32 offsetLeft
33 当前元素相对于其定位父元素的水平偏移量
34 offsetTop
35 当前元素相对于其定位父元素的垂直偏移量
36
37
38 scrollWidth
39 scrollHeight
40 可以获取元素整个滚定区域的高度和宽度
41 */
42 var op=box1.offsetParent;
43 //alert(op.id);
44 //alert(box1.offsetLeft);//0
45 //alert(box2.offsetLeft);//8
46 //alert(box2.offsetTop);//8
47 //alert(box1.offsetLeft);//0
48 alert(box4.scrollWidth);//450
49 //alert(box5.scrollWidth);//450
50
51 /*
52 scrollLeft
53 可以获取水平滚动条滚动的距离
54 scrollTop
55 可以获取垂直滚动的距离
56 */
57 alert(box4.scrollLeft);
58 alert(box4.scrollTop);
59 //当满足scrollHeight-scrollTop==clientHeight说明垂直滚动条到底了
60 alert(box4.scrollHeight-box4.scrollTop);
61 //当满足scrollWidth-scrollLeft==clientWidth
62 };
63 }
64 </script>
65 <style type="text/css">
66 #box1{
67 width:200px;
68 height:200px;
69 background-color:red;
70 padding:10px;
71 border:10px solid yellow;
72 }
73 /*
74 #box2{
75 width:100px;
76 height:100px;
77 background-color:green;
78 }
79 #box3{
80 width:100px;
81 height:100px;
82 background-color:yellow;
83 }
84 */
85 #box4{
86 width:300px;
87 height:300px;
88 background-color:#bfa;
89 overflow:auto;
90 }
91 #box5{
92 width:450px;
93 height:500px;
94 background-color:blue;
95
96 }
97
98 </style>
99 <body>
100 <button id="button1">点我一下</button>
101 <button id="button2">button2</button>
102 <button id="button3">button3</button>
103 <br/><br/>
104 <div id="box4">
105 <div id="box5"></div>
106 </div>
107 <div id="box2" style="position:relative">
108 <div id="box1"></div></div>
109 <div id="box3"></div>
110 </body>
111 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>其他样式相关的属性</title>
6 </head>
7 <script type="text/javascript">
8 window.onload=function()
9 {
10 /*
11 当垂直滚动条滚动到底时使表单项可用
12 onscroll 该事件会在元素的滚动条滚动时触发
13 */
14
15 var info=document.getElementById("info");
16 var input=document.getElementsByTagName("input");
17 //var can=document.getElementById("1");
18
19 var i=0;
20 //为info绑定一个滚动条滚动的事件
21 info.onscroll=function(){
22 if(info.scrollHeight-info.scrollTop==info.clientHeight)
23 {
24 /*
25 disabled属性可以设置一个元素是否禁用，
26 如果设置为true，则元素禁用
27 如果设置为false，则元素可用
28 */
29 input[0].disabled=false;
30 input[1].disabled=false;
31 }
32
33 };
34
35
36 var button=document.getElementById("2");
37 button.onclick=function(){
38 //alert("hi");
39 if(input[0].checked==true)
40 alert("注册®️成功！");
41 else
42 {
43 alert("注册™️失败");
44 //alert(input[0].checked);
45 }
46 };
47 };
48 </script>
49 <style type="text/css">
50 #info{
51 width:600px;
52 height:500px;
53 background-color:#bfa;
54 overflow:auto;
55 }
56 #info {
57 margin:50px auto;
58 }
59
60 </style>
61 <body>
62 <h3 style="text-align:center">欢迎亲爱的用户,请仔细阅读以下协议</h3>
63 <p id="info">
64 <<中国食品添加剂和配料协会食品添加剂和配料咨询网
65 登记注册网上服务系统使用协议>>
66 <br>
67 1. 总则
68
69 1.1 注册用户同意本协议的全部条款并完成注册程序，才能成为本系统的正式用户。请您仔细阅读本协议，您点击"同意"按钮后即表示完全接受本协议项下的全部条款。
70
71 1.2 用户一旦注册，即视为用户确认自己具有享受本站服务的权利能力和行为能力，能够独立承担法律责任。
72
73 1.3 在注册和使用本系统时，用户应了解相关法律法规，确知享有的权利和义务；应保证注册时提交的信息合法、真实、准确，并取得相应授权。
74
75 2. 用户
76
77 2.1 注册用户向本系统提供的注册资料应当是真实、准确、完整、合法有效的，用户注册资料如有变动的，应及时更新。如用户提供的注册资料不合法、不真实、不准确、不详尽的，用户需承担因此引起的相应责任及后果。
78
79 2.2 用户注册成功后，将产生用户名和密码等账户信息。用户可以根据本系统规定变更密码。用户应谨慎合理的保存、使用其用户名和密码。用户若发现任何非法使用用户账号或存在安全漏洞的情况，请立即通知我们。
80
81 2.3 用户应当对以其用户名登录进行的所有活动和事件负法律责任。用户不得将在本系统注册获得的账户转让、出售或出借给他人使用，否则用户应承担由此产生的全部责任，并与实际使用人承担连带责任。
82
83 2.4 用户同意，本系统拥有通过电子邮件、短信电话等形式，向注册用户和相关申请人发送和告知相关审核信息与结果的权利。该等通知于发送之日视为已送达收件人。
84
85 3. 服务
86
87 3.1 本系统服务的具体内容由中国食品添加剂和配料协会（以下简称“协会”）根据实际情况提供并逐步完善。
88
89 3.2 本系统仅提供相关的网络服务，除此之外与相关网络服务有关的设备（如个人电脑、手机、及其他与接入互联网或移动网有关的装置）及所需的费用（如为接入互联网而支付的电话费及上网费）均应由用户自行负担。
90
91 3.3 本系统需要定期或不定期地对提供网络服务的平台或相关的设备进行检修或者维护，如因此类情况而造成网络服务在合理时间内的中断，协会无需为此承担任何责任，但应尽可能事先进行通告。
92
93 3.4 如发生下列任何一种情形，本系统有权随时中断或终止向用户提供本协议项下的服务而无需对用户或任何第三方承担任何责任：
94
95 3.4.1 用户提供的个人资料不真实；
96
97 3.4.2 用户违反本协议中规定的使用规则；
98
99 3.4.3 用户名存在违反法律法规或国家政策要求，或侵犯任何第三方合法权益的情形；
100
101 </p>
102 <!--
103 如果表单项添加disabled="disabled" 则表单项将变成不可用的状态
104 -->
105 <div style="text-align:center">
106 <input type="checkbox" id="1"disabled="disabled"/>我已阅读协议
107 <input type="button" value="注册" disabled="disabled" id="2"/>
108 </div>
109 </body>
110 </html>
