用脚本调用样式的几种方法
之前经常遇见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”,也许会对你的疑惑有所帮助。
相关推荐
-
JavaScript函数的4种调用方法详解
在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.函数有四种调用模式,分别是:函数调用形式.方法调用形式.构造器形式.以及apply形式.这里所有的调用模式中,最主要的区别在于关键字 this 的意义,下面分别介绍这个几种调用形式. 本文主要内容: 1.分析函数的四种调用形式2.弄清楚函数中this的意义3.明确构造函对象的过程4.学会使用上下文调用函数 一.函数调用形式 函数调用形式是最常见的形式,也是最
-
Javascript调用函数方法的几种方式介绍
javascript语法灵活,同一个功能有五六种实现方式并不罕见,然后再加上有些反人类的原型继承和异步特性,就更让人一头雾水了.我经常搞不清楚call,apply之间的区别,今天就记录一下,以免再忘了. 在javascript中,方法可以通过以下几种方式执行: 1.func(),这是最直接最常见的调用方式,也符合一般人的思维逻辑,但是在某些情况下有一些不足,下面会解释. 2.(function(arg){})(window),匿名方法调用,在构造命名空间时比较有用,后面的括号中的参数与匿名方法中
-
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
-
JavaScript中5种调用函数的方法
这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! JavaScript,调用函数的5种方法 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍. 作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的
-
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函数的调用</
-
用脚本调用样式的几种方法
之前经常遇见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样式的两种方法
目录 第一种: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
随机推荐
- AngularJS创建自定义指令的方法详解
- 详解Asp.Net Core 发布和部署( MacOS + Linux + Nginx )
- Python pickle模块用法实例分析
- c++递归实现n皇后问题代码(八皇后问题)
- winxp 安装MYSQL 出现Error 1045 access denied 的解决方法
- PHP直接修改表内容DataGrid功能实现代码
- js实现汉字排序的方法
- javascript 线性渐变二
- android开发教程之view组件添加边框示例
- 微软发布12款安全补丁 涉及所有Windows版本
- Android中实现EditText密码显示隐藏的方法
- Java的Hibernate框架中一对多的单向和双向关联映射
- JVM内存管理之JAVA语言的内存管理详解
- Laravel实现构造函数自动依赖注入的方法
- ASP中生成文本文件的两种方式
- 详解ios11中estimatedRowHeight属性
- 基于OpenCv的运动物体检测算法
- CSS Hack 汇总速查手册浏览器兼容必会
- PyQt5 在label显示的图片中绘制矩形的方法
- pandas通过字典生成dataframe的方法步骤