点击添加css的js |引用外部css的两种方式

随着前端开发的不断发展，越来越多的开发者开始使用CSS来构建网站和应用程序。然而，对于一些特殊情况，例如在页面中需要添加额外的样式或布局，或者需要将CSS应用到特定的元素上，则需要使用JavaScript来实现。本文将介绍如何使用JavaScript来实现点击添加CSS的功能。

HTML结构

<h1>欢迎来到偶的网站</h1>

<p>这里是一段文本内容。</p>

CSS样式

接下来，需要定义一个CSS样式，用于在点击添加CSS时应用到元素上。例如：

color: #fff;

text-align: center;

margin-bottom: 20px;

color: #fff;

font-size: 18px;

line-height: 1.5;

margin-bottom: 20px;

color: #fff;

text-decoration: none;

border-bottom: 1px solid #ccc;

JavaScript代码

接下来，需要编写JavaScript代码，用于执行点击添加CSS的操作。例如：

var link = document.getElementById(‘link’);

link.addEventListener(‘click’, function() {

var element = document.getElementById(‘element’);

var style = document.createElement(‘style’);

style.type = ‘text/css’;

style.innerHTML = ‘h1 { color: #4CAF50; text-align: center; margin-bottom: 20px; }\n p { color: #4CAF50; font-size: 18px; line-height: 1.5; margin-bottom: 20px; }\n a { color: #4CAF50; text-decoration: none; border-bottom: 1px solid #ccc; }’;

element.style.innerHTML = style.innerHTML;

通过使用JavaScript，大家可以实现点击添加CSS的功能。首先，大家需要定义一个HTML结构，然后定义一个CSS样式，最后编写JavaScript代码，用于执行点击添加CSS的操作。通过执行这些操作，大家可以将CSS样式应用到特定的元素上，从而实现添加额外的样式或布局的目的。