return css样式怎么写

html-css020

return css样式怎么写,第1张

<body oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onselect='document.selection.empty()' oncopy='document.selection.empty()' onbeforecopy='return false' onmouseup='document.selection.empty()'>

在 JS(JavaScript) 操作cookies比较复杂，在 ASP 里面我们只需要知道 cookie 的名称、cookie 的值就行了，而 JS 里面，我们面对的是 cookie 的字符串，你自己编写这个字符串写入客户端，然后自己解析这个字符串。

一、从写 cookie 说起。

var the_date = new Date("December 31, 2020")

var expiresDate = the_date.toGMTString()

document.cookie = "userDefineCSS=" + escape(title) + "expires=" + expiresDate

第一句是日期对象；

第二句将日期格式转换成 GMT 格式；编者者： GMT 即格林威治标准时间，现在也称 UTC 即全球标准时间。

第三句是将 cookie 内容写入客户端。

其中 expires 是系统使用的，表示 cookie 的失效日期（也可以省略），expires 不可读。

escape 是对 cookie 值进行编码，这是为了处理中文、空格等而设立的。

二、取 cookie 是比较简单的。

function GetCSS()

{

var cookieStr = document.cookie//取 cookie 字符串，由于 expires 不可读，所以 expires 将不会出现在 cookieStr 中。

if (cookieStr == "")

{

return "main1"//没有取到 cookie 字符串，返回默认值

}

var cookieValue = cookieStr.split("")//将各个 cookie 分隔开，并存为数组，多个 cookie 之间用分号加空隔隔开，不过前面我们只使用了一个 cookie，它的值与 expires 之间也是用分号加空格隔开的

var varName = "userDefineCSS"

var startPos = -1

var endPos = -1

for (var i=0i<cookieValue.lengthi++)

{

startPos = cookieValue[i].indexOf(varName)

if (startPos != 0)

{

continue//当前 cookie 不是名称为 varName 的 cookie，判断下一个 cookie

}

startPos += varName.length + 1//当前 cookie 就是名称为 varName 的 cookie，由于有等号，所以 +1

endPos = cookieValue[i].length

var css = unescape(cookieValue[i].substring(startPos, endPos))

return css

}

return "main1"

}

/* 字体链接样式 */

td.firstLevelMenuClass a:link {color: #3E8BAC text-decoration: none}      /* 未访问的链接 */

td.firstLevelMenuClass a:visited {color: #FFFFFF text-decoration: none}    /* 已访问的链接 */

td.firstLevelMenuClass a:hover {color: #FFFFFF}    /* 鼠标移动到链接上 */

td.firstLevelMenuClass a:active {color: #FFFFFF}   /* 选定的链接 */

/* 鼠标事件背景样式 */

td.firstLevelMenuClass:hover {background-image: url(../../Public/img/menu_first_down_bg.gif) }  /* 鼠标移动到链接上 */

td.<span style="color:#cc0000">firstLevelMenuClassHover</span>{background-image: url(../../Public/img/menu_first_down_bg.gif) }

td.firstLevelMenuClass{background-image: url(../../Public/img/head_menu_center.gif) }

JS:

[javascript] view plain copy

/*

* 取得对应类和标签的HTML元素

* clsName:给定类名

* tagName：给定的HTML元素，如果为任意 tagName='*'

*

*/

function getElementsByClassName(clsName, tagName) {

var ClassElements = []

selElements = document.getElementsByTagName(tagName)

for (var i = 0 i < selElements.length i++) {

if (selElements[i].className == clsName) {

ClassElements[ClassElements.length] = selElements[i]

}

}

return ClassElements

}

//通过改变元素class名达到间接改变背景样式

function onFirstMenuChangeBg(e) {

//先清除已经改变的元素背景样式

var getElements = getElementsByClassName('<span style="color:#cc0000">firstLevelMenuClassHover</span>', 'td')

for (var i = 0 i < getElements.length i++) {

getElements[i].className = "firstLevelMenuClass"

}

//设置鼠标点击元素背景样式

e.className = "firstLevelMenuClassHover"

}

HTML:

[html] view plain copy

<td class="firstLevelMenuClass" id="firstLevelMenu0"  onclick="onFirstMenuChangeBg(this)" >

<a href='#'>测试0</a>

</td>

<td class="firstLevelMenuClass" id="firstLevelMenu1"  onclick="onFirstMenuChangeBg(this)" >

<a href='#'>测试1</a>

</td>

<td class="firstLevelMenuClass" id="firstLevelMenu2"  onclick="onFirstMenuChangeBg(this)" >

<a href='#'>测试2</a>

</td>