1. 程式人生 > >利用指令碼指令碼實現修改CSS樣式

利用指令碼指令碼實現修改CSS樣式

在用CSS樣式的時候,可能某些偽類在一些瀏覽器中得不到很好的支援,這個時候可以用JavaScript修改樣式,從而實現自己想要的結果。

偽類如 :hover  在一些瀏覽器中可能得不到很好的支援。

下面是自己寫的程式碼:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style type="text/css">
ul{
	list-style-type:none;
}
li{
	float:left;
	margin-right:30px;
}
</style>
</head>

<body>
<ul>
<li onMouseOver="ceh(this)" onMouseOut="deh(this)">147258</li>
<li onMouseOver="ceh(this)" onMouseOut="deh(this)">345789</li>   /*this 引數為當前物件*/
<li onMouseOver="ceh(this)" onMouseOut="deh(this)">475962</li>
<li onMouseOver="ceh(this)" onMouseOut="deh(this)">749586</li>
</ul>


<script>
function ceh(whip)
{
	whip.style.color="red";
	whip.style.borderBottom="3px solid #F00";   /*JavaScript中樣式採用camel標記法,參考資料如下*/
	whip.style.fontSize="26px";                 /*屬性中需要去掉下劃線,另外首字母小寫,其他單詞首字母均大寫*/
}
function deh(whip)
{
	whip.style.color="";
	whip.style.borderBottom="";
	whip.style.fontSize="";
}
</script>
</body>
</html>

參考資料如下:http://blog.csdn.net/betabin/article/details/7483220

相關推薦

利用指令碼指令碼實現修改CSS樣式

在用CSS樣式的時候,可能某些偽類在一些瀏覽器中得不到很好的支援,這個時候可以用JavaScript修改樣式,從而實現自己想要的結果。 偽類如 :hover  在一些瀏覽器中可能得不到很好的支援。 下面是自己寫的程式碼: <!doctype html> <

關於修改css樣式的幾種js用法

click sel 改變 border blue 實現 round document selector 看了js也有一段時間了,對於修改css樣式有很多種方式可以實現,今天做一個小小的總結吧。 首先寫個例子 body部分 <div class="box">&l

javascript 動態修改css樣式

csdn 知識 net posit name 知識點 顯示 span 部分 方法一:改變外聯css文件,這裏不講這個。 方法二:通過改變claaName來改變樣式,語法: obj.className = "style2"; //或者 obj.setAttribute(

javascript 動態修改css樣式方法匯總(四種方法)

tool geb code 標簽 AD java border nlog tro 在很多情況下,都需要對網頁上元素的樣式進行動態的修改。在JavaScript中提供幾種方式動態的修改樣式,下面將介紹方法的使用、效果、以及缺陷。 1、使用obj.className來修改樣

vux修改css樣式的2種辦法

  最近手上有個移動端的專案。前端UI框架是選擇的VUX。但是在使用的時候經常會發現框架自帶的元件樣式和我們要求的不一致。經常需要手動覆蓋樣式。這裡記錄下我們使用的2種方法。 我們以XHeader元件為例。XHeader元件預設為藏青色。 全域性方式 找到build目錄下的webpack.base.

Javascript 如何訪問 和 修改CSS樣式(網頁樣式)

如果想修改某個元素的CSS樣式,建議看一下我寫的另一篇文章: 注意:我說的是修改,而不是訪問。如果是修改的話可以看看上面《補充說明》這篇文章,但如果是訪問的話,就看本文中的這兩種方法,同樣,如果是訪問兼顧修改的話,也只看本文中的兩種方法(這是我瞭解到的兩種方法,如果有其

ASP.NET中直接用C# 動態修改CSS樣式

 ASP.NET中直接用C# 動態修改CSS樣式 wonsoft ([email protected])   使用JavaScript控制CSS樣式有點麻煩,還是覺得直接使用C#

javascript 動態修改css樣式方法

CSS ? 1 2 3 4 5 6 7 .style1{margin:10px auto ;background-color:#9999FF; display

javascript滑鼠點選實現改變CSS樣式

javascript通過改變元素class名達到間接改變CSS樣式 CSS:/* 字型連結樣式 */ td.firstLevelMenuClass a:link {color: #3E8BAC; text-decoration: none;} /* 未訪問的連結 */

富文字編輯器,實現設定css樣式的原理

var selection =window.getSelection().getRangeAt(0) if (selection) { var text = selection.toString();

Material Design:利用RecyclerView CardView實現新聞卡片樣式

最終要實現的效果: 1,支援低版本 RecyclerView 和 CardView都是在Android 5.0中引入的,所以要想在低版本中使用,需要在build.gradle中新增: dependencies { ...

jQuery 修改CSS樣式 與 attr方法-獲得修改元素屬性值

-------------------------------- attr方法------------------------------------------ <!DOCTYPE html> <html lang="en"> <head&g

css實現修改默認滾動條樣式

dtd pointer inter rgb back rbo trac 整體 rgba <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>

css實現修改預設滾動條樣式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>     <title>scroll </title> <style>

利用perl指令碼實現SAC檔案頭段變數寫入

在當前scripts資料夾下執行perl指令碼,實現對../Data資料夾內各地震事件資料夾內哥SAC波形檔案, 進行SAC頭段變數寫入. 從pick.dat中讀入第3,5 行作為a,t0, 寫入SAC頭段. 程式中使用到iddir.dat(地震資料夾及對應的地震ID). #!/usr/bin/

JavaScript指令碼CSS樣式

在使用JavaScript指令碼化操作CSS樣式表的時候,必須要使用到兩個物件:   1,元素物件:也就是<link>元素與<style>元素。   2,CSSStyleSheet物件:與當前文件關聯的在一起的樣式表,通過document.styleSheets獲取,該物件是隻讀的

利用shell指令碼呼叫ansible自動化實現企業備份基本環境

inotify+rsync實時監控推送NFS掛載目錄指令碼 #!/bin/bash Path=/data /usr/bin/inotifywait -mrq --format '%w%f' -e create,close_write,delete /data | while read line

利用Shell指令碼實現遠端MySQL自動查詢

下面這個指令碼是一個簡單用來執行遠端資料庫查詢的命令,相信大家都能看得懂,這對於有些需要每天自動檢查資料庫或是執行某些語句的兄弟,是很有幫助的,只要稍加修改就可以 #!/bin/shHOST=192.168.5.40USER=abcPASS=123456QUERY=`mysql -h$HOST -u$USE

利用shell指令碼實現企業備份基本環境

要求是利用ansible遠端啟動本地指令碼來實現。因此,模擬五臺。 利用ansible主機 分發四個指令碼給不同的伺服器。 在備份伺服器上配置rsync檔案。增加系統重要檔案模組和mysql模組還有nfs模組 uid = rsync gid = rsync u

利用python指令碼程式監控檔案被修改

需求: 利用python編寫監控程式,監控一個檔案目錄,當目錄下的檔案發生改變時,實現有修改就發報警郵件 郵件使用QQ郵箱,需要開啟smtp,使用手機發生簡訊,騰訊會給你發郵箱密碼。如下所示: 把這個密碼填到程式中。 python版本 [[email protect