JavaScript2017.01.24 2019.02.01 l＠ha

[JavaScript,JQuery]CSSを動的に変更する

CSSを動的に変更する方法のメモです。

//設定している外部CSSのリンク
<link id="css_link" href="####" rel="stylesheet" type="text/css">

//素のJavaScriptの場合
var css_link = document.getElementById("#css_link");
css_link.href="@@@@";　　//リンク先を@@@@に変更

//JQueryの場合
$("#css_link").attr("href", "@@@@");　　　//リンク先を@@@@に変更

1

2

3

4

5

6

7

8

9

//設定している外部CSSのリンク

<link id="css_link" href="####" rel="stylesheet" type="text/css">

//素のJavaScriptの場合

var css_link = document.getElementById("#css_link");

css_link.href="@@@@";　　//リンク先を@@@@に変更

//JQueryの場合

$("#css_link").attr("href", "@@@@");　　　//リンク先を@@@@に変更

素のJavaScriptと違って、JQueryはattr(name, value)を使用しないとhrefのプロパティにアクセスできないようです。

このあたりはJQueryのソースコードを読まないとわからないのかな。