在前端開發中，JavaScript（JS）是不可或缺的一部分。JS可以與HTML和CSS進行交互，使得網頁的交互性和動態效果更加豐富。其中，JS可以用來設置HTML元素的CSS樣式。下面就讓我們來了解一下JS如何設置可見的CSS樣式吧。

// 獲取需要設置CSS樣式的HTML元素
var element = document.getElementById('example');
// 設置CSS樣式
element.style.color = 'red';
element.style.fontSize = '20px';
element.style.backgroundColor = 'black';

在上面的代碼中，我們首先通過getElementById方法獲取了一個HTML元素對象，它的id屬性為'example'。然后，我們通過該對象的style屬性，進一步設置了該元素的color、fontSize和backgroundColor等CSS樣式。這樣，當被設置CSS樣式的HTML元素被渲染到頁面中后，它就會顯示出我們期望的樣式。

此外，我們還可以使用另一種方式來設置HTML元素的CSS樣式。具體而言，我們可以為HTML元素添加class屬性，然后在CSS文件中定義該class的樣式。下面是一個示例代碼：

// 獲取需要設置class屬性的HTML元素
var element = document.getElementById('example');
// 添加class屬性
element.classList.add('example-class');

在上面的代碼中，我們同樣是通過getElementById方法獲取了一個HTML元素對象。然后，我們通過該對象的classList屬性，使用add()方法為該元素添加一個名為'example-class'的class屬性。接著，在CSS文件中，我們可以這樣定義'example-class'的樣式：

.example-class {
color: red;
font-size: 20px;
background-color: black;
}

通過以上的方式，我們同樣可以設置HTML元素的CSS樣式。不過，相較于第一種方式，這種方式更加方便擴展和管理，因為我們可以將多個元素所共用的樣式定義在同一個class中，從而避免了代碼的重復。