iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 28
0
Modern Web

一個 JS 學習者的日常系列 第 28

一個 JS 學習者的日常 day27

提高網頁效能的方法二,用 cssText 來置換屬性。
每當點擊橘色盒子的時候,盒子就會向左偏移。並做一個按鈕可以讓盒子回到原來位置。

說明:
我們把原本的 rectangle.style.left = left + 'px';
置換成 rectangle.style.cssText += left: ${left}px; 來避免 reflow

小提醒:
因為 cssText 是直接複寫 css 內容,所以我們用 += 累加的方式,將要修改的樣式字串加到後面

codepen

HTML code

<div class="move where">點我向右走</div>
<button class="reset">reset</button>

CSS code

.move {
  width: 100px;
  line-height: 100px;
  text-align: center;
  background: orange;
  position: absolute;
  top: 50%;
  transform: translateY(-50%); 
  cursor: pointer;
}

.where {
  left: 10px;
}

.reset {
  border-radius: 50px;
  font-weight: bold;
  background: black;
  color: white;
}

JS code

var left = 10;
var top = 10;

var rectangle = document.getElementsByClassName("where")[0]
var reset = document.getElementsByClassName("reset")[0]

rectangle.addEventListener('click', function(){
  left += 10;
  rectangle.style.cssText = `left: ${left}px`
  //rectangle.style.left = left + 'px';
})

reset.addEventListener('click', () => {
  rectangle.style.cssText = "left: 10px"
  left = 10;
})

上一篇
一個 JS 學習者的日常 day 26
下一篇
一個 JS 學習者的日常 day28
系列文
一個 JS 學習者的日常30

尚未有邦友留言

立即登入留言