Javascript

DOM in JS #6: Manipulating Element’s Styles

DOM in JS 6 Manipulating Element’s Styles

1. Mở đầu

Khi làm việc với DOM có lẽ bạn lên hạn chế style ngay trong phần code JS vì sau này sẽ rất mất công để maintain mà chúng ta lên viết thêm class và add hoặc remove nó. Nhưng theo mình cũng không lên dùng trong phần code JS mà lên gắn cờ sau đó add hay remove nó ở bên ngoài code HTML.

Chung lại nhất là style thì lên đi cùng với HTML như vậy sẽ hợp lí hơn, để tránh người về sau đọc code cảm thấy khó khăn, khó nhận biết. (Để tránh nó chửi mình code khó hiểu hoặc cũng chính là bản thân mình trong tương lai).

Bên trên chỉ là một chút kinh nghiệm của mình thôi, vì đã có những lần mình debbug mà không hiểu sao nó lại có class, style đó rồi cuối cùng mới biết nó là ở trong phần code logic JS @@.

Còn ở phần này mình xin giới thiệu đến bạn cách làm việc vơi Style nói chung của HTML thông qua đối tượng DOM. Vẫn như mục đích chính của các bài trước, mục đích của bài này của mình là muốn bạn hiểu hơn về những gì mà đối tượng DOM cho mình và mong là bạn sẽ có một mối liên hệ nào đó với những gì mình đang làm để hiểu hơn về cách mà công nghệ bạn đang dùng từ đó fix được những con bug khó không tưởng ^^.

2. Chi tiết

Inline style

Đối với mỗi Element Node sẽ có một thuộc tính mặc định đó chính là style. Thuộc tính này đặc biệt ở chỗ là nó sẽ cho bạn các style Css ở bên trong này, theo quy tắc camelcase. Bạn có thể hiểu là như vậy, tuy nhiên sẽ có một vài trường hợp đặt biệt mà mình muốn nói tới.

Nếu thuộc tính bắt đầu với dấu - thì bạn có thể dùng dấu [] để chỉ định chúng.

element.style.['-webkit-text-stock'] = 'unset';

Còn nếu không thì chỉ cần chuyển sang dạng camelcase:

backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
floatcssFloat
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
stroke-dasharraystrokeDasharray
stroke-dashoffsetstrokeDashoffset
stroke-widthstrokeWidth
text-aligntextAlign
text-decorationtextDecoration
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexzIndex

Với syntax như trên chắc bạn đã cảm thấy quen thuộc, (hình như mình đã dùng nó ở đâu đó rồi). Hãy xem ví dụ bên dưới và hãy F12 lên để thử ngay nhé.

const bodyEl = document.querySelector("body");
bodyEl.style.color = "red";
bodyEl.style.backgroundColor= "yellow";

Nhưng bạn cũng có thể set lại css của nó dựa vào thuộc tính cssText của style property, dưới đây là ví dụ bạn có thể tham khảo được. Đối với dạng này bạn sẽ viết Css luôn chứ không dùng camelcase nữa. (Hoặc bạn cũng có thể nối thêm style cho nó).

const bodyEl = document.querySelector("body");
bodyEl.style.cssText = "color:red;background-color:yellow";
// bodyEl.style.cssText += 'color:red;background-color:yellow';

Hoặc nếu liên hệ với bài trước về Attribute mình có giới thiệu thì bạn cũng có thể dùng lại setAttribute() method để style lại đối tượng mà bạn target tới.

const bodyEl = document.querySelector("body");
bodyEl.setAttribute('style','color:red;background-color:yellow');

getComputedStyle() method:

Nếu cách style bên trên như setter thì getComputedStyle() giống như getter vậy. Nhưng đây là một phương thức rất đặc biệt, nó đặc biệt ở chỗ nó là phương thức của đối tương BOM chứ không phải DOM. Còn bạn hỏi BOM là gì thì nó là Browser object model mà những phần tiếp theo mình sẽ nói đến nhé @@. Nó cũng là một chủ đề khá lắm thứ hay ho mà mình muốn nói tới. Quay lại với phương thức này, hãy xem syntax của nó nào:

let style = window.getComputedStyle(element [,pseudoElement]);

Vì là phương thức của BOM lên bạn hoàn toàn có thể không cần gọi nó từ window mà có thể gọi thẳng luôn, nó như setTimeout, setInterval, …. Element là một Element Node, nếu bạn truyền tham số dạng khác vào bạn sẽ get ra lỗi. Còn đối với pseudoElement nếu không truyền gì vào thì mặc định nó sẽ là null nhé. Bạn có thể xem ví dụ để hiểu hơn:

const bodyEl = document.querySelector("body");
const style = getComputedStyle(bodyEl);
console.log('color:', style.color); // rgb(0, 0, 0)
console.log('background color:', style.backgroundColor); // rgb(255, 255, 255)

Hoặc đối với khi dùng cùng pseudo-elements params bạn sẽ lấy ra được thuộc tính css khi mà pseudo-elements này được áp dụng. (Ở đây bạn hãy tự đặt Id và thử trên trang của bạn nhé).

const buttonEl = document.querySelector("#button");
const style = getComputedStyle(buttonEl, "::hover");
console.log('color:', style.color);
console.log('background color:', style.backgroundColor);

className and classList property:

className là một thuộc tính của một Element Node, nó return là một list các class bạn có thể add, thêm hay set lại nó dễ dàng.

const bodyEl = document.querySelector('body');
bodyEl.className = "class_1 class_2";
console.log(bodyEl.className);

Khác với className thì classList lại chỉ là thuộc tính read-only nghĩa là bạn không thể nào modifiers nó trực tiếp mà phải thông qua các phương thức của nó.

<div id="content" class="main red">JavaScript classList</div>

let div = document.querySelector('#content');
for (let cssClass of div.classList) {
    console.log(cssClass);
}
// main
// red

div.classList.add('info','visible','block'); // main red info visible block
div.classList.remove('block','red'); // main info visible
div.classList.replace('info','warning'); // main warning visible
div.classList.contains('warning'); // true
div.classList.toggle('visible'); // main warning visible

3. Kết luận

Bên trên là một phần nhỏ cách style với DOM mà mình tham khảo được, ngoài ra còn khá nhiều cách khác nữa. Bạn có thể research thêm, mục đích của bài này cũng là muốn giới thiệu những cách cơ bản nhất đến bạn để bạn có chút hiểu hơn về những gì mà mình đang làm ^^.

Cuối cùng, See you sooonnnn.

4. Tham khảo

# Manipulating Element’s Styles
# JavaScript and HTML DOM Reference

Tagged , , ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments