如何用js获取外联css,内联外联CSS和JS

内联CSS

代码示例：

这里文字是红色。

内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。

外联CSS

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内使用标签将css样式文件链接到HTML文件内，如下面代码：

内联Javascript

代码示例：

下面的IsEven() 函数是以内联的方式出现在网页中的

[html]

[head]

[script type="text/javascript"]

function IsEven()

{

var number = document.getElementById("TextBox1").value;

if (number % 2 == 0)

{

alert(number + " is even number");

}

else

{

alert(number + " is odd number");

}

}

[/script]

[/head]

[body]

[form id="form1" runat="server"]

Number :

[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]

[input type="button" value="Check Number" οnclick="IsEven()" /]

[/form]

[/body]

[/html]

外置Javascript

1、新建JS文件将上面的IaEven()写入如下这段代码：

function IsEven()

{

var number = document.getElementById("TextBox1").value;

if (number % 2 == 0)

{

alert(number + " is even number");

}

else

{

alert(number + " is odd number");

}

}

2、在网页的部分添加指向外置JS文件的路径,如下所示:

[script type="text/javascript" src="ExternalJavaScript.js"][/script]

完整代码为：

[html]

[head]

[script type="text/javascript" src="ExternalJavaScript.js"][/script]

[/head]

[body]

[form id="form1" runat="server"]

Number :

[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]

[input type="button" value="Check Number" οnclick="IsEven()" /]

[/form]

[/body]

[/html]

使用外置Javascript相较于内联Javascript的好处在于:

可维护性:

外置Javascript文件可以被多个页面调用而不用在每个页面上反复地书写.如果有需要改变的部分,你只需要在一处修改即可.所以外置Javascript导致代码工作量减少,进而使得维护手续也更加方便

关注点分离:

将Javascript封装在外部的.js文件遵循了关注点分离的法则.总体来说,分离HTML,CSS和Javascript从而让我们更容易操纵他们.而且如果是多名开发者同步工作的话,这样也更方便,

表现性:

外置Javascript文件可以被浏览器缓存住,但是内联Javascript在每次页面加载的时候都会被重新加载

以上资料为多处整理

内联式css样式，直接写在现有的HTML标签中

CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式. 内联式css样式表就是把css代码直接写在现有的HTML标签中 ...

js和css内联外联注意事项

简单说:这两个问题其实是同一个问题,但是网上找了好久也找不到方法,外联的js和css文件里不能有任何HTML的标记注释,一旦有,浏览器就疯了!一去掉就好了!!! 问题:起因是网上看到一个css的表格样 ...

外联css及js的使用

结构图如下: html如下:

button test

SQL Join各种内联外联说明

Visual Representation of SQL Joins C.L. Moffatt, 3 Feb 2009 CPOL    4.96 (406 votes) Rate this: This ...

CSS的三种样式：内联式，嵌入式，外部式以及他们的优先级

从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码:

webpack4对第三方库css，项目全局css和vue内联css文件提取到单独的文件(二十二)

在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...

转载：CSS的组成,三种样式(内联式,嵌入式,外部式),优先级