css変数をjsで変えたい

前提・実現したいこと

:rootにmain-colorでredを設定して、スクロールしてある要素にきた時にmain-colorをblue変えたい。

発生している問題・エラーメッセージ

色が変わらない

Googleの検証で見ましたが、エラーとは書いてありませんでした。

該当のソースコード

HTML
1<meta name="viewport" content="width=device-width,initial-scale=1">
2<link href="css/reset.css" rel="stylesheet" type="text/css">
3<link href="css/works.css" rel="stylesheet" type="text/css">
4<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
6<script type="text/javascript" src="./js/site-border.js"></script>
7</head>
8<body>
9<section class="section--01">
10  <h1>SECTION--01</h1>
11</section>
12<section class="section--02">
13  <h1>SECTION--02</h1>
14</section>
15<section class="section--03">
16  <h1>SECTION--03</h1>
17</section>	
18</body>
19</html>

css
1@charset "UTF-8";
2:root {
3  --main-color: red; }
4
5section {
6  height: 150vh;
7  background: var(--main-color);
8  position: relative;
9  -webkit-transition: .8s;
10  -o-transition: .8s;
11  transition: .8s; }
12
13/* 以下関係なし */
14h1 {
15  font-size: 40px;
16  font-weight: bold;
17  position: absolute;
18  top: 50%;
19  left: 50%;
20  -webkit-transform: translate(-50%, -50%);
21  -ms-transform: translate(-50%, -50%);
22  transform: translate(-50%, -50%); }

js
1var root = document.documentElement;
2$(document).ready(function(){
3$('.section--01').on('inview', function(event, isInView) {
4	if (isInView) {
5		root.style.setProperty('--main-color', 'red');
6	}
7});
8
9$('.section--02').on('inview', function(event, isInView) {
10	if (isInView) {
11		root.style.setProperty('--main-color', '#e04747');
12	}
13});
14
15$('.section--03').on('inview', function(event, isInView) {
16	if (isInView) {
17		root.style.setProperty('--main-color', '#035fff');
18	}
19});
20});

試したこと

css変数を変化させていくjsを調べて何度も書き換えましたが、ダメでした。

補足情報（FW/ツールのバージョンなど）

sublimetext3,検証はsafariとchromeのみで、どちらも効かず。

ここにより詳細な情報を記載してください。

m.ts10806

2019/03/15 00:07

on inview使う場合はinview.jsが必要と思うのですが、読み込みはどちらに書かれていますか？

行動規範の内容に同意します

回答2件

想定通りに動くかどうかは別として、inview.jsを読み込ませると
変わります。

あと強いてなら、jQueryの書き方で一環されたほうが良いかなと。

js
1    $('.section--01').on('inview', function(event, isInView) {
2        if (isInView) {
3            $(':root').css('--main-color', 'red');
4        }
5    });
6
7    $('.section--02').on('inview', function(event, isInView) {
8        if (isInView) {
9            $(':root').css('--main-color', '#e04747');
10        }
11    });
12
13    $('.section--03').on('inview', function(event, isInView) {
14        if (isInView) {
15            $(':root').css('--main-color', '#035fff');
16        }
17    });

投稿2019/03/15 00:15

m.ts10806

総合スコア80886

ベストアンサー

setProperty()メソッドは、CSSStyleDeclarationオブジェクトのメソッドです。
CSSStyleDeclaration.setProperty() - Web APIs | MDN

そして、CSSStyleDeclarationの取得について3パターンがあげられています。

Via HTMLElement.style, which deals with the inline styles of a single element (e.g., <div style="...">).
Via the CSSStyleSheet API. For example, document.styleSheets[0].cssRules[0].style returns a CSSStyleDeclaration object on the first CSS rule in the document's first stylesheet.
Via Window.getComputedStyle(), which exposes the CSSStyleDeclaration object as a read-only interface.

ご提示のコードはdocument.documentElementから取得されていますから、1番目のものに当たると思うのですが、その場合に取得できるのはインラインスタイルのみのようですね。

解決方法ですが、document.styleSheets[0].cssRules[0]のような形式でCSSルールを取得して書き換えるのがいいでしょう。
現実的には:not(#markerRule)みたいな意味を持たない属性セレクタを挿入しておいて、それを目印にdocument.styleSheetsを全部なめる、というのはいかがでしょうか。

と思ったのですが、気になっていろいろサンプルを書いてみたところ、:rootのインラインがオリジンで優先されて継承されますね……
https://jsfiddle.net/Lhankor_Mhy/tz2x90d5/1/
考えられるのは、子要素に別のスタイルが当たっているとかでしょうか……

投稿2019/03/15 01:12

編集2019/03/15 01:31