如何用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 testSQL 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的組成,三種樣式(內聯式,嵌入式,外部式),優先級
總結
以上是生活随笔為你收集整理的如何用js获取外联css,内联外联CSS和JS的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机设计大赛海洋世界,全国大学生海洋文
- 下一篇： springboot中aop的应用场景_