第16章　CSSの操作

# **CSSを操作する**
***

JavaScriptでCSSを操作するには、以下のような方法があります。

+ styleプロパティを直接変更する

+ CSSクラス名を変更する

+ スタイルシートを読み込む

<br>

## **1.styleプロパティ**
対象のHTML要素を取得してstyleプロパティに任意のCSSを追加するという方法です。

#### **例**
[sample16-1.html]

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="test">Hello world!</p>
    <script>
        var elem = document.getElementById("test");
        elem.style.fontSize = '32px';
        elem.style.color = '#f00';
        elem.style.marginLeft = '100px';
    </script>
</body>
</html>
```

#### **実行結果**
![graph16-1.png](https://i.loli.net/2019/08/21/d75ioNrHxZGLKqw.png)

## **2.CSSクラス名を変更**
各要素のクラス名を変更することでスタイルを変更することもできます。

```classList```というプロパティを使って、クラス名を追加したり削除できます。
```
// to_be_class_changedというidの要素を取得
var element = document.getElementById(’to_be_class_changed’);
 
 // クラス名の追加
element.classList.add(’should-be-added’); 
// クラス名の削除
element.classList.remove(’should-be-removed’); 
// クラス名がなければ追加、あれば削除
element.classList.toggle(’should-be-toggled’);

// 要素.classList.contains(’クラス名’)で、クラス名が存在するかどうかを確認できます。

// => 追加したので、true
console.log(element.classList.contains(’should-be-added’)); 
 // => 削除したので、false
console.log(element.classList.contains(’should-be-removed’)); 
```

<br>

#### **例**
[sample16-2.html]

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="test123" class="testABC">Hello world!</p>
    <input type="button" value="Click" onclick="myfunc()">
    <script>
        function myfunc() {
            var myh2 = document.getElementById("test123");
            myh2.classList.toggle("testABC");
            myh2.classList.add("testEFG");
        }
    </script>
    <style>
        .testABC {
            font-size: 50px;
        }
        .testEFG {
            font-size: 20px;
        }
    </style>
</body>
</html>
```

#### **実行結果**
<pre>
<span class="nocode">
<iframe src="javascript: '<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=&quot;test123&quot; class=&quot;testABC&quot;>Hello world!</p>
<input type=&quot;button&quot; value=&quot;Click&quot; onclick=&quot;myfunc()&quot; style=&quot;font-size:inherit&quot;>
<script>
function myfunc(){
var myh2 = document.getElementById(&quot;test123&quot;);
myh2.classList.toggle(&quot;testABC&quot;);
myh2.classList.add(&quot;testEFG&quot;);
}
</script>

## **3.スタイルシートを読み込み**
スタイルシート（CSSファイル）をlinkタグを使って読み込むことで、スタイルシートをdocumentに適用することもできます。

```
  var head = document.head;
  var linkElement = document.createElement("link");
 
  linkElement.type = "text/css";
  linkElement.rel = "stylesheet";
  linkElement.href = "https://softusing.co.jp/assets/css/plugins.min.css";
 
  head.appendChild(linkElement);
  ```

***

>**練習**
>>**問題**[ex16-1.html]

CSSクラス名の変更で、下記の処理を実施しましょう。

<pre>
<span class="nocode">
<iframe src="javascript: '<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=&quot;test123&quot; class=&quot;testABC&quot;>Hello world!</p>
<input type=&quot;button&quot; value=&quot;拡大&quot; onclick=&quot;myfunc()&quot; style=&quot;font-size:inherit&quot;>
<br>
<input type=&quot;button&quot; value=&quot;縮小&quot; onclick=&quot;myfunc2()&quot; style=&quot;font-size:inherit&quot;>
<script>
function myfunc(){
var myh2 = document.getElementById(&quot;test123&quot;);
myh2.classList.toggle(&quot;should-be-toggled&quot;);
myh2.classList.remove(&quot;testEFG&quot;);
myh2.classList.add(&quot;testABC&quot;);
}
function myfunc2(){
var myh3 = document.getElementById(&quot;test123&quot;);
myh3.classList.toggle(&quot;should-be-toggled&quot;);
myh3.classList.add(&quot;testEFG&quot;);
}
</script>

content

第16章 CSSの操作

第16章　CSSの操作