用脚本调用样式的几种方法

之前经常遇见classname、csstext之类的词，却不知道如何用。最近着手网站实际建设，收获颇多，给还不懂的人分享一下。

通常在网页中样式表的调用方法有四种。第一是外链，即<link rel="StyleSheet" href = "/control/css/base.css">的形式；第二是输入样式表；第三是在网页头部申明，如<head> <style type="text/css">...；最后是直接在对象后写样式，即<div style = "width:80%...;">的形式。我们用脚本调用样式，也要从这几方面入手。

一、通常情况下，我们可以通过改变外链样式的的href的值实现网页样式的实时切换，也就是“改变模板风格”。这时候我们首先需要赋予需要改变的目标一个id，如

<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />

调用时很简单，如<span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式</span>

二、局部改变样式，分为改变直接样式，改变className和改变cssText三种。需要注意的是：第一，javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法实现效果。第二，如果改变className，则事先在样式表中申明类，但调用时不要再跟style，像
document.getElementById('obj').style.className="..."的写法是错误的！
只能写成：document.getElementById('obj').className="..."

但是如果用cssText的话，必须加上style，正确的写法是：
document.getElementById('obj').style.cssText="..."

改变直接样式我就不必说了，大家记得要写到具体样式即可，如
document.getElementById('obj').style.backgroundColor="#003366"
对于新人往往不知道CSS具体样式在javascript怎么写，而且有时候在不同浏览器中要求也不一样。如float在IE中写成styleFloat，在FIREFOX中写成cssFloat，这就需要大家的积累了。在google中搜索“JSS”，也许会对你的疑惑有所帮助。

赞 (0)

相关推荐

  • Javascript调用函数方法的几种方式介绍

    javascript语法灵活,同一个功能有五六种实现方式并不罕见,然后再加上有些反人类的原型继承和异步特性,就更让人一头雾水了.我经常搞不清楚call,apply之间的区别,今天就记录一下,以免再忘了. 在javascript中,方法可以通过以下几种方式执行: 1.func(),这是最直接最常见的调用方式,也符合一般人的思维逻辑,但是在某些情况下有一些不足,下面会解释. 2.(function(arg){})(window),匿名方法调用,在构造命名空间时比较有用,后面的括号中的参数与匿名方法中

  • JavaScript函数的4种调用方法详解

    在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.函数有四种调用模式,分别是:函数调用形式.方法调用形式.构造器形式.以及apply形式.这里所有的调用模式中,最主要的区别在于关键字 this 的意义,下面分别介绍这个几种调用形式. 本文主要内容: 1.分析函数的四种调用形式2.弄清楚函数中this的意义3.明确构造函对象的过程4.学会使用上下文调用函数 一.函数调用形式 函数调用形式是最常见的形式,也是最

  • HTML页面,测试JS对C函数的调用简单实例

    这里记一下,以后要用的时候可以查! <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio"> <meta http-equiv="content-type" content="text/html;charset=gbk"> <TITLE>HTML页面,测试JS对C函数的调用</

  • JavaScript中5种调用函数的方法

    这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! JavaScript,调用函数的5种方法 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍. 作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的

  • VC调用javascript的几种方法(推荐)

    第一种:通过execScript调用.这种方法,虽然操作方便,但不能获取返回值. m_spHtmlDoc->get_parentWindow(&m_pHtmlWindow); VARIANT ret; ret.vt = VT_EMPTY; BSTR bstr = sScript.AllocSysString(); bRet = m_pHtmlWindow->execScript(bstr, L"javascript", &ret); ::SysFreeStr

  • 用脚本调用样式的几种方法

    之前经常遇见classname.csstext之类的词,却不知道如何用.最近着手网站实际建设,收获颇多,给还不懂的人分享一下. 通常在网页中样式表的调用方法有四种.第一是外链,即<link rel="StyleSheet" href = "/control/css/base.css">的形式:第二是输入样式表:第三是在网页头部申明,如<head> <style type="text/css">...:最后是直接

  • js改变css样式的三种方法推荐

    共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s

  • vue修改Element的el-table样式的4种方法

    修改Element中的el-table样式,可以使用以下几种方法: 1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style. 2. cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style. 3. header-row-style 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style. 4. header-c

  • C#调用JS的几种方法

    cmd调用phantomjs 官方资料:http://phantomjs.org/quick-start.html 手动执行 从官方下载phantomjs.exe,拷贝它与要执行的js同目录 打开cmd,输入命令行(参考官方资料的命令行) phantomjs XX.js 参数1 参数2 获得结果 使用C#执行 //注意:保证phantomjs.exe和js在生成目录下存在 string url = "传参"; //这里调用cmd.exe Process pProcess = new P

  • Vue3.0之引入Element-plus ui样式的两种方法

    Vue3.0之引入Element-plus ui样式的两种方法

    目录 第一种:CDN 第二种:通过 npm 安装,并希望配合 webpack 使用 安装:官网欢迎star:github npm install element-plus --save 第一种:CDN 目前可以通过 unpkg.com/element-plus 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用.<! – 引入样式 -->< link rel=“stylesheet” href=“https://unpkg.com/element-plus/lib/t

  • 详解python调用cmd命令三种方法

    目前我使用到的python中执行cmd的方式有三种 使用os.system("cmd") 该方法在调用完shell脚本后,返回一个16位的二进制数,低位为杀死所调用脚本的信号号码,高位为脚本的退出状态码,即脚本中"exit 1"的代码执行后,os.system函数返回值的高位数则是1,如果低位数是0的情况下,则函数的返回值是0×100,换算为10进制得到256. 如果我们需要获得os.system的正确返回值,那使用位移运算可以还原返回值: >>>

  • 在ASP中调用存储过程的几种方法

    1 这也是最简单的方法,两个输入参数,无返回值: set connection = server.createobject("adodb.connection") connection.open someDSN  Connection.Execute "procname varvalue1, varvalue2" '将所有对象清为nothing,释放资源 connection.close set connection = nothing 2 如果要返回 Record

  • 利用div+jquery自定义滚动条样式的2种方法

    最近做项目中有一个模块是用于实时监控的,左边有个菜单栏用于显示所有的设备,那当然是从数据库中动态获取的了,右边是个iframe用于显示监控画面.本来这个功能并不复杂,左边的菜单项是利用dtree.js来实现的,可时当功能实现完成之后,却发现一个问题,就是左边菜单栏中的设备名有的会很长,会超出了div的长度,准确说是左边iframe的宽度和长度不够.那么,这时就必须要利用滚动条了,可以设置左边菜单项div的overflow-x:auto;overlfow-y:auto;这样就会自动生成了滚动条,但

  • jQuery操作元素css样式的三种方法

    我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句话 - "jQuery让JavaScript代码变得简洁!" 1. addClass() - 添加CSS类 $("#target").addClass(&q

随机推荐