d3.js style()用法及代碼示例

D3.js中的d3.style()函數用於為具有指定名稱(值)的指定節點(屬性)設置樣式。在這種情況下，如果節點具有指定名稱的內聯樣式，則返回其值，如果節點沒有內聯樣式，則返回計算出的值。

用法:

d3.style(node, name)

參數：此函數接受上述和以下描述的兩個參數：

node:這是所選元素的屬性。
name:這是指定屬性的值。

返回值：此函數返回具有指定名稱(值)的指定節點(屬性)的值樣式屬性。

以下示例說明了D3.js中的d3.style()函數
範例1：

html

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            D3.js | d3.style() Function 
        </title> 
  
        <script src= 
"https://d3js.org/d3.v4.min.js"> 
        </script> 
    </head> 
  
    <body> 
        <p style="color:green;"> 
          GeeksforGeeks 
        </p> 
  
        <p style="color:green;"> 
          A computer science portal for geeks 
        </p> 
  
        <script> 
            
            // Calling the style() function 
            d3.select("p").style("color", "red"); 
        </script> 
    </body> 
</html>

輸出：

範例2：

html

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            D3.js | d3.style() Function 
        </title> 
  
        <script src= 
"https://d3js.org/d3.v4.min.js"> 
        </script> 
    </head> 
  
    <body> 
        <p style="color:green;"> 
          GeeksforGeeks 
        </p> 
  
  
        <p style="color:green;"> 
          A computer science portal for geeks 
        </p> 
  
        <script> 
            // Calling the style() function 
            d3.select("p").style("font-size", "40px"); 
        </script> 
    </body> 
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自MKS075大神的英文原創作品 D3.js style() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。