<!DOCTYPE html>
<html><head></head>
<body>
<p id="foo">hello world</p>
<script>
var foo = document.getElementById('foo');
foo.style.color = 'blue';
foo.style.fontWeight="bold";
foo.style.fontSize="20px";
// 函數-橫槓式
// foo.style.setProperty("background-color","lightblue");
// 函數-簡寫式
// foo.style.setProperty("background","lightblue");
// 函數-駝峰式（失敗，無此方式）
// foo.style.setProperty("backgroundColor","lightblue");
// 陣列-橫槓式
// foo.style['background-color'] = '#ddd';
// 陣列-駝峰式
// foo.style['backgroundColor'] = 'lightyellow';
// 陣列-簡寫式
// foo.style['background'] = 'blue';
// 橫槓式 (失敗，無此方式)
// foo.style.background-color = "#eeb";
//駝峰式
// foo.style.backgroundColor = 'yellow';
//簡寫式
// foo.style.background = 'rgb(200,150,100)';
</script>
</body>
</html>
2022年9月17日 星期六
從 Javascript 修改 CSS
2022年9月16日 星期五
CSS background ３個應用範例
CSS 參考來源：點閱
CSS3 參考來源：點閱
現在大部份人使用 background 都是一個一個設定它的其它屬性，但若不涉及CSS3新增的屬性時，它其實可一次設定完畢！
-----------------------------------------------------
１、不同 Background 的宣告方式
-----------------------------------------------------
<!DOCTYPE html>
<html><head></head>
<body>
<style>
div{
border:1px solid red;
width:200px;
height:200px;
}
.test1{
/* 原始大小 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
}
.test2{
/* 新舊語法混合用，圖像最大化且不失真 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
background-size:contain;
}
.test3{
/* 新舊語法混合用，圖像最大化，要固定在div背面時，「卻穿透粘在body背景」 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat fixed;
background-size:contain;
}
.test4{
/* 新舊語法混合用，圖像最大化且失真 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
background-size:cover;
}
.test5{
/* 只用新語法，圖像最大化且不失真 */
background-image:url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me');
background-repeat:no-repeat;
background-size:contain;
background-attachment:;
}
</style>
第一個（原始大小）<br/>
<div class="test1"></div>
<p><br/>
第二個（一個 background 把各屬性全宣告完畢，結果正常）<br/>
<div class="test2"></div>
<p><br/>
第三個（要固定在div背面時，「卻穿透粘在body背景」）<br/>
<div class="test3"></div>
<p><br/>
第四個（background-size:cover 使底端不能正常顯示）<br/>
<div class="test4"></div>
<p><br/>
第五個（使用多個屬性才宣告完畢，結果也是正常）<br/>
<div class="test5"></div>
</body>
</html>
----------------------------------------------------------
２、background 上傳圖片及設定之運用
----------------------------------------------------------
<!DOCTYPE html>
<html><head></head>
<body>
<style>
div{
border:1px solid red;
width:200px;
height:200px;
}
.test1{
/* 使用原始大小 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
}
.test2{
/* 新舊語法混合用，圖像最大化且不失真 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
background-size:contain;
}
.test3{
/* 新舊語法混合用，Div 背景圖像最大化，固定在背景時『卻穿透粘在body背景上』*/
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat fixed;
background-size:contain;
}
.test4{
/* 新舊語法混合用，圖像最大化且失真 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
background-size:cover;
}
.test5{
/* 只用新語法，圖像最大化且不失真 */
background-image:url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me');
background-repeat:no-repeat;
background-size:contain;
background-attachment:;
}
</style>
<div class="test1"></div>
<p>
<div class="test2"></div>
<p>
<div class="test3"></div>
<p>
<div class="test4"></div>
<p>
<div class="test5"></div>
</body>
</html>
-----------------------------------------------------
３、background 之二圖片合併應用
-----------------------------------------------------
<!DOCTYPE html>
<html><head></head>
<body>
<style>
#example1 {
margin-top:0px;
background: url(https://drive.google.com/uc?export=view&id=1-J20rOq4FT45R9Fqe1PJmahdBwnX5zZ0) right bottom no-repeat, url(https://drive.google.com/uc?export=view&id=1W-VLYg2ZvLcyvcrw2bOMWKYDd7Lc12Lg) left top repeat;
padding: 15px;
}
</style>
<div id="example1">
<h1>不是痛苦，只是不痛快</h1>
<p>一些官員只求自己職位，疏忽了人民需求，不是停用就是搞網軍。若一個國家會衰敗，這些蠹蟲是禍首！</p>
<p>我自反省，由於已看透這些爪耙子的底細，因他們而導致國民之損失，我並不感覺痛苦，只是心中不痛快而已～</p>
</div>
</body>
</html>