javascript基礎（樣式的操作，瀏覽器相容樣式操作，其他的樣式相關屬性，滾動的樣式）（三十）
1.樣式的操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 點選按鈕以後，修改box1的樣式
*/
//獲取按鈕和box1
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var box1 = document.getElementById("box1");
//定義一個變數
var l = 100;
//為btn01繫結一個單擊響應函式
btn01.onclick = function(){
/*
* 修改元素的樣式
* 語法：元素.style.樣式名 = 樣式值;
* 注意樣式名中帶有-不能直接寫
* 像
* background-color
* border-width
* border-left-style
* - 這種帶有-的樣式名，需要將其修改為駝峰命名法，然後在操作
* 將-去掉，然後將-後的字母改大寫
* backgroundColor
* borderWidth
*
* - 通過style修改的樣式都是元素的內聯樣式，
* 而內聯樣式的優先順序最高的，所以我們通過JS修改的樣式往往會立即顯示
* 但是如果在樣式後新增了!important，則無法通過內聯樣式進行覆蓋
* 所以我們要儘量去避免使用!important
*/
l += 10;
//修改box1的寬度
box1.style.width = l + "px";
box1.style.height = l + "px";
//修改背景顏色為黃色
box1.style.backgroundColor = "yellowgreen";
};
btn02.onclick = function(){
/*
* 語法：
* 元素.style.樣式名
*
* - 通過style只可以讀取內聯樣式，不能讀取樣式表中的樣式
* 如果沒有內聯樣式則不能讀取
*/
//讀取box1的樣式
alert(box1.style.backgroundColor);
};
};
</script>
</head>
<body>
<button id="btn01">修改樣式</button>
<button id="btn02">讀取樣式</button>
<div id="box1"></div>
</body>
</html>
2.瀏覽期相容操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
height: 100px;
background-color: red;
width: 500px;
margin-top: 50px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 點選按鈕以後，修改box1的樣式
*/
//獲取按鈕和box1
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var box1 = document.getElementById("box1");
//為btn01繫結一個單擊響應函式
btn01.onclick = function(){
/*
* 讀取元素的當前生效的樣式
* 語法：元素.currentStyle.樣式名
*
* currentStyle只有IE瀏覽器支援，在其他的瀏覽器中不好使
*/
//alert(box1.currentStyle.width);
/*
* 正常瀏覽器需要使用一個getComputedStyle()這個方法來獲取當前的樣式
* 這個方法就是window的方法，可以直接使用
* 引數：
* 1.要獲取樣式的元素
* 2.要獲取的元素的偽類，如果不需要可以傳null
*
* - 這個方法會返回一個物件，在這個物件中封裝了元素的當前樣式
*
* - 注意此方法IE8及以下的瀏覽器不支援
*
* - 通過currentStyle和getComputedStyle()讀取到的樣式都是隻讀的，不能修改
* 如果需要修改，則需要使用style。
*
*/
//var st = getComputedStyle(box1 , null);
//alert(st.width);
//alert(getComputedStyle(box1 , null).width);
//getComputedStyle(box1 , null).width = "300px";
//alert(getComputedStyle(box1 , null).width);
//alert(box1.currentStyle.width);
alert(getStyle(box1 , "width"));
};
};
/*
* getComputedStyle()適用於IE9及以上的瀏覽器
* currentStyle使用於IE8及以下的瀏覽器
* 為了可以相容所有的瀏覽器，我們需要自定義一個函式，來獲取元素的樣式
*/
/*
* 用來獲取任意元素的當前樣式
* 引數：
* obj 要獲取樣式的元素
* name 要獲取的樣式的名字
*
* 在讀取元素的樣式時，如果元素沒有設定樣式，
* 則火狐、Chrome等瀏覽器會自動計算元素的樣式值
* 而IE瀏覽器，有使用不會自動計算，而是返回預設值，比如寬度會返回auto
*
*/
function getStyle(obj , name){
//判斷瀏覽器中是否含有getComputedStyle這個方法
if(window.getComputedStyle){
//支援正常的瀏覽器
return getComputedStyle(obj,null)[name];
}else{
//只支援IE
return obj.currentStyle[name];
}
//return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
}
</script>
</head>
<body>
<button id="btn01">讀取樣式</button>
<button id="btn02">讀取樣式</button>
<div id="box1" ></div>
</body>
</html>
3.其他的樣式相關屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: silver;
margin-top: 20px;
/*設定邊框*/
/*border: 10px solid red;
padding: 100px;*/
}
</style>
<script type="text/javascript">
window.onload = function(){
//獲取按鈕和box1
var btn01 = document.getElementById("btn01");
var box1 = document.getElementById("box1");
btn01.onclick = function(){
/*
* clientWidth
* clientHeight
* - 獲取元素的可見寬度和高度
* - 獲取到的值包括元素的內容區和內邊距
* - 這些屬性都是隻讀，只能看不能修改
*/
//alert(box1.clientHeight);
//box1.clientHeight = "500px" ;
/*
* offsetWidth
* offsetHeight
* - 可以用來獲取元素整個的可見框的大小
* - 它獲取到的值，包括內容區、內邊距和邊框
*/
//alert(box1.offsetWidth);
/*
* offsetParent
* - 可以返回當前元素的定位父元素
* - 定位父元素，指離當前元素最近的開啟了定位的祖先元素
* 如果所有的祖先元素都沒有開啟定位，則返回body
*/
var op = box1.offsetParent;
//alert(op)
/*
* offsetLeft（水平偏移量）
* offsetTop（垂直偏移量）
* - 獲取當前元素相對於其定位父元素的偏移量
*/
//輸出box1相對於其定位父元素的水平偏移量
alert(box1.offsetTop);
};
};
</script>
</head>
<body>
<button id="btn01">點我一下</button>
<div id="box3" style="width: 400px; height: 400px; background-color: skyblue;">
<div id="box2" style="width: 300px; height: 300px; background-color: honeydew; ">
<div id="box1"></div>
</div>
</div>
</body>
</html>
4.滾動的樣式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: silver;
overflow: auto;
}
#box2{
width: 450px;
height: 500px;
background-color: #bfa;
}
</style>
<script type="text/javascript">
window.onload = function(){
//獲取按鈕和box1
var btn01 = document.getElementById("btn01");
var box1 = document.getElementById("box1");
btn01.onclick = function(){
//獲取box1的高度
//alert(box1.clientHeight);
/*
* scrollHeight
* - 可以獲取元素滾動區域的高度
* scrollWidth
* - 可以獲取元素滾動區域的寬度
*/
//alert(box1.scrollWidth);
/*
* scrollTop
* - 垂直滾動條滾動的距離
* scrollLeft
* - 水平滾動條滾動的距離
*/
//alert(box1.scrollLeft);
//當 scrollHeight - scrollTop = clientHeight時，則說明垂直滾動條滾動到底了
//當 scrollWidth - scrollLeft = clientWidth時，則說明水平滾動條滾動到底了
//alert(box1.scrollHeight - box1.scrollTop);
};
};
</script>
</head>
<body>
<button id="btn01">點我一下</button>
<br /><br />
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
滾動的樣式練習：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#info{
width: 200px;
height: 400px;
background-color: #bfa;
overflow: auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 當滾動條滾動到底時，使表單項可用
*/
//為p元素繫結一個滾動條滾動的事件
var info = document.getElementById("info");
//獲取兩個表單項
var inputs = document.getElementsByTagName("input");
/*
* onscroll
* - 滾動條滾動的事件，當元素的滾動條滾動時會觸發
*/
info.onscroll = function(){
//檢查滾動條是否滾動到底
if(this.clientHeight == this.scrollHeight - this.scrollTop){
//當進入判斷，則說明滾動條滾動到底了
//使兩個表單項變成可用狀態
//disabled屬性用來設定表單項是否禁用
//設定為true，表示禁用，設定為false表示可用
inputs[0].disabled = false;
inputs[1].disabled = false;
}
};
};
</script>
</head>
<body>
<h3>親愛的使用者，歡迎註冊</h3>
<p id="info">
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
請仔細閱讀以下協議，如果你不同意，你就別註冊
</p>
<!--
如果在表單項中新增disabled="disabled"，則可以將表單項變成不可用的狀態
-->
我已仔細閱讀，同意協議 <input type="checkbox" disabled="disabled" />
<br /><br />
<input type="submit" value="註冊" disabled="disabled" />
</body>
</html>
相關文章
- 自定義瀏覽器滾動條樣式瀏覽器
- JQuery屬性與樣式——樣式操作.css()和元素資料的儲存.data()jQueryCSS
- css樣式相關的驚豔的屬性CSS
- 【JavaScript】DOM之樣式操作JavaScript
- jQuery 樣式操作jQuery
- 操作樣式表
- javascript之屬性操作、innerHTML、判斷、自增、操作多個樣式的方法和不相容的屬性JavaScriptHTML
- 瀏覽器預設樣式瀏覽器
- weex的css樣式相關CSS
- Android 樣式屬性的使用Android
- 設定谷歌瀏覽器視窗右側滾動條的樣式谷歌瀏覽器
- css樣式常用的樣式以及選擇器CSS
- css字型樣式屬性CSS
- 設定谷歌瀏覽器其滾動條樣式程式碼谷歌瀏覽器
- JQuery中操作Css樣式的方法jQueryCSS
- jQuery知識總結之元素屬性與樣式的操作jQuery
- 自定義瀏覽器捲軸樣式瀏覽器
- (JavaScript學習記錄)：jQuery 樣式操作JavaScriptjQuery
- js中css樣式相容各個瀏覽器寫法JSCSS瀏覽器
- Android ListView的滾動條樣式AndroidView
- CSScursor屬性改變滑鼠的樣式CSS
- 超美的滾動條樣式
- （中級）快捷樣式屬性
- div滾動條樣式，水平滾動
- jQuery基礎樣式——選擇器jQuery
- 瀏覽器預設樣式程式碼收集瀏覽器
- css全域性樣式基礎程式碼CSS
- JavaScript學習9：DOM操作表格及樣式JavaScript
- uni-app全域性樣式和區域性樣式APP
- css 改變scroll滾動條的樣式CSS
- javascript如何獲取內聯樣式和外部樣式表的值JavaScript
- 常用CSS樣式2：其它樣式CSS
- 常用CSS樣式1：文字樣式CSS
- JS基礎_獲取元素的樣式JS
- 純css美化滾動條樣式CSS
- CSS常見樣式和屬性CSS
- jQuery基礎——樣式篇 (選擇器）jQuery
- Flutter 樣式基礎之 MediaQueryFlutter