標題：JavaScript動態修改CSS樣式

隨著Web開發的不斷發展，JavaScript已經成為了一種非常重要的編程語言，可以用于實現各種復雜的交互效果和動態效果。而CSS則是一種用于描述網頁元素的樣式語言，主要通過選擇器和屬性來定義網頁中的各種元素的外觀和樣式。

在JavaScript中，可以使用各種方法來修改CSS樣式。其中一種常見的方法是通過JavaScript和CSS之間的交互來實現。具體來說，可以使用JavaScript來控制選擇器，從而修改CSS選擇器中的屬性，從而改變網頁中的元素的樣式。

下面，我們將介紹如何使用JavaScript動態修改CSS樣式的一個例子。假設我們有一個HTML頁面，其中包含一個帶有標簽的段落元素，我們可以使用JavaScript來動態修改這個段落元素的標簽樣式，使其看起來更加符合我們的需求。

HTML代碼示例：

```html

<p id="myPng">Hello, world!</p>

CSS代碼示例：

```css

#myPng {

font-size: 16px;

font-weight: bold;

JavaScript代碼示例：

```javascript

var pt = document.getElementById("myPng").offsetWidth;

var br = document.getElementById("myPng").offsetHeight;

pt = pt - br.offsetHeight; // 獲取段落元素的寬度和高度

document.getElementById("myPng").style.fontWeight = "normal"; // 將段落元素的標簽樣式改為正常

document.getElementById("myPng").style.fontSize = "14px"; // 將段落元素的標簽樣式改為14px

document.getElementById("myPng").style.fontFamily = "Arial"; // 將段落元素的標簽樣式改為Arial

在上面的JavaScript代碼中，我們首先通過`document.getElementById("myPng").offsetWidth`和`document.getElementById("myPng").offsetHeight`獲取段落元素的寬度和高度。然后，我們將獲取到的值減去頁面中其他元素的高度，以得到段落元素的寬度。

接下來，我們使用`document.getElementById("myPng").style.fontWeight`和`document.getElementById("myPng").style.fontSize`屬性來修改段落元素的標簽樣式。`fontWeight`屬性用于定義字體樣式，將其設置為`normal`將恢復段落元素的原始標簽樣式，將其設置為`normal`或`light`將使段落元素的標簽樣式更加符合我們的需求。

最后，我們使用`document.getElementById("myPng").style.fontFamily`屬性來修改段落元素的標簽樣式。`fontFamily`屬性用于定義字體家族，將其設置為`Arial`將使段落元素的標簽樣式與Arial字體匹配。

通過上面的JavaScript代碼，我們可以動態修改段落元素的標簽樣式，使其看起來更加符合我們的需求。這種方法不僅可以用于修改單個元素的標簽樣式，還可以用于修改整個頁面的樣式，從而實現更加復雜的樣式調整。