javascript 更改字體-前端問答-PHP中文網

javascript 更改字體

王林

發布： 2023-05-09 14:08:38

原創

621 人瀏覽過

Javascript 可以輕鬆地更改網頁中的字體。字體的變更可以透過修改樣式表中的字體屬性或直接修改文字元素的樣式來實現。

以下是使用Javascript 變更字體的兩個基本方法：

修改樣式表（CSS）中的字體屬性：

在Javascript 中，我們可以使用document.styleSheets 屬性來存取樣式表，並使用cssRules 屬性來存取樣式規則。我們可以找到需要修改字體屬性的規則，然後將其字體屬性修改為新的字體。

下面是範例程式碼：

// 找到需要修改字体的样式规则
var styleSheets = document.styleSheets;
for (var i = 0; i < styleSheets.length; i++) {
  var rules = styleSheets[i].cssRules || styleSheets[i].rules;
  for (var j = 0; j < rules.length; j++) {
    if (rules[j].selectorText === 'body') {
      // 修改字体属性
      rules[j].style.fontFamily = 'Arial, sans-serif';
    }
  }
}

登入後複製

這段程式碼將 body 元素的字體屬性修改為 Arial, sans-serif。

直接修改文字元素的樣式：

我們也可以直接修改文字元素的樣式。我們可以找到需要修改字體的元素，然後將其樣式中的字體屬性修改為新的字體。

下面是範例程式碼：

// 找到需要修改字体的元素
var elements = document.getElementsByTagName('p');
for (var i = 0; i < elements.length; i++) {
  // 修改字体属性
  elements[i].style.fontFamily = 'Arial, sans-serif';
}

登入後複製

這段程式碼將頁面中所有 元素的字體屬性修改為Arial, sans-serif。

以上就是使用 Javascript 改變字體的兩個基本方法。透過修改樣式表或直接修改元素樣式，我們可以輕鬆實現變換字體的效果。

以上是javascript 更改字體的詳細內容。更多資訊請關注PHP中文網其他相關文章！