转行学开发,代码100天——2018-04-11

通过JavaScript获取和修改HTML元素及CSS属性是其一个基本功能。对于CSS样式通常有行内样式,外部样式,内嵌样式之分。

如:

行内样式:

    <div id="box" style="width: 100px;height: 100px;background:#ccc"></div>

外部样式:

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

内嵌样式:

<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>

对于样式的获取也因其写入方式不同而有所区别:

对于行内样式的获取,用  obj.style.属性方式

如下面的一个获取和修改行内样式的案例:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript获取样式的方式</title>
<script type="text/javascript">
//css样式获取和修改方法,两个参数时,获取;三个参数时修改
function css(obj){
alert(arguments[0]);
if (arguments.length==2) {
return arguments[0].style[arguments[1]];
}else
{
arguments[0].style[arguments[1]] = arguments[2];
}
}
//封装获取元素方法
function $(id){return document.getElementById(id);}
window.onload =function () {
var box = $('box');
alert(css(box,"width"));//获取
css(box,"width","200px");//设置属性 }
</script>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background:#ccc"></div>
</body>
</html>

通过css函数技能获取样式也能修改样式,其前提是基于获取的HTML对象obj

   function css(obj){
alert(arguments[0]);
if (arguments.length==2) {
return arguments[0].style[arguments[1]]; //获取样式
}else
{
arguments[0].style[arguments[1]] = arguments[2]; //修改样式
}
}

为了使用方便,提升函数的通用性,可以将该函数进一步优化,增加obj,name,value参数

    //css样式获取和修改方法,两个参数时,获取;三个参数时修改
function css(obj,name,value){
// alert(arguments[0]); //arguments[0]=obj
if (arguments.length==2) {
return obj.style[name]; //获取样式
}else
{
obj.style[name] = value; //修改样式
}
}

非行间样式:obj.style.属性  方式并不适用与非行间样式

“好东西一般不兼容”

在用currentStyle() 与getComputedStyle() 获取非行间样式时需要考虑兼容性问题,而浏览器的兼容性问题一般都是通过if..else条件语句实现。

obj.currentStyle[attr] 兼容IE6、7、8 
getComputedStyle(obj,false)[attr] 不兼容IE6、7、8

    //获取样式
function getStyle(obj){
alert(obj.currentStyle);//考虑兼容性问题
if (obj.currentStyle) {
alert(obj.currentStyle.width);
}else{
alert(getComputedStyle(obj,false).width);
}
}

优化该函数后如下:

    //获取样式
function getStyle(obj,name){
// alert(obj.currentStyle);//考虑兼容性问题
if (obj.currentStyle) {
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}

但是currentStyle() 与getComputedStyle() 方式只能用于获取样式,而不能设置样式

此外:

currentStyle()方式只能获取简单样式(height,width等),不能用于获取复合样式(border,background)等,若需要获取背景颜色,可以用backgroundcolor

 总结:

1.行内样式:obj.style.属性

2.非行内样式:obj.currentStyle[attr] 兼容IE6、7、8 
getComputedStyle(obj,false)[attr] 不兼容IE6、7、8

3.兼容性问题基本上都是通过if...else条件语句实现

4.currentStyle()方式不能获取复合样式。

day26—JavaScript对CSS样式的获取和修改实践的更多相关文章

  1. 转:jquery操作元素的css样式(获取、修改等等)

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  2. 使用jquery操作元素的css样式(获取、修改等等)

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  3. 原生javascript 获得css样式有几种方法?

    css 样式分为行内样式和 外部样式: 1.javascript 获得行内样式 : 可以使用  ele.style."属性名称"(如果遇到属性名称带有"-", ...

  4. JavaScript对css样式表操作

    CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...

  5. <JavaScript>尺寸类样式的获取

    尺寸类样式的获取 offsetHeight HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数.(content+ ...

  6. JavaScript、CSS样式收集

    JS集: //给from一个名字然后在JavaScript的地方就可以用form的名字来调用form表单里input元素的value属性可以得到值 var val=form_name.input_na ...

  7. Javascript访问css样式信息

    DOM2级样式为style对象定义了一些属性和方法,可以通过这些方法属性来访问或者修改元素的样式信息: 1.cssText:可读写,在读的情况下以字符串形式返回元素的css代码,在写的情况下以字符串形 ...

  8. JavaScript更改css样式

    来源:https://www.w3school.com.cn/js/js_htmldom_css.asp 1, document.getElementById(id).style.property = ...

  9. 配置dataimport时候 如果css样式有问题 要修改index和admin的版本号

随机推荐

  1. SpringMVC Controller单例和多例(转)

    首先上测试代码 import org.springframework.context.annotation.Scope; import org.springframework.stereotype.C ...

  2. 基于 SwiftUI 创建一个可删除、可添加列表项的列表

    执行环境 macOS Mojave: 10.14.5 xcode: Version 11.0 beta 6 (11M392q) 预览效果 完整代码 import SwiftUI class Item: ...

  3. 1. AtomicInteger 、Unsafe 及 CAS方法的整理

    本文摘自: https://blog.csdn.net/fanrenxiang/article/details/80623884 http://ifeve.com/sun-misc-unsafe/ h ...

  4. 解析安装mysql

    大多数人在结束咱们前面学习的基础知识的时候,其实一脸懵逼,不过我们已经开始步入了另一个新的高度,针对基础知识还是必须巩固针对性的进行补充,可以分模块总结:比如基础知识的数据结构---->函数-- ...

  5. centos7卸载YUM后重装过程 -bash: yum: command not found / -bash: yum: 未找到命令

    [root@localhost ~]# rpm -qa |grep yum yum-3.4.3-158.el7.centos.noarch yum-plugin-fastestmirror-1.1.3 ...

  6. 基础入门Bootstrap

    一.CSS样式 1.图片 2.布局.排版(之全局显示) 3.容器-网格-栅格系统 搭建的格式如下 <!DOCTYPE html> <html> <head> < ...

  7. 【技巧】Windows 10 1809无法接收1903解决方法

    这都7月份了,Windows10 1903都升级的有一个月了,然而我的1809的系统一直找不到1903的更新. 虽说1903会有bug,但还是想体验一把.周围同事都更新了,心里还是痒痒的. 于是每天都 ...

  8. Robomongo可视化命令

    ## 更新命令示例 db.getCollection('collection_name').update(    {'_id':ObjectId('id string')},     {$set:{' ...

  9. bzoj3589 动态树 树链剖分+容斥

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=3589 题解 事件 \(0\) 不需要说,直接做就可以了. 事件 \(1\) 的话,考虑如果直接 ...

  10. js执行上下文与执行上下文栈

    一.什么是执行上下文 简单说就是代码运行时的执行环境,必须是在函数调用的时候才会产生,如果不调用就不会产生这个执行上下文.在这个环境中,所有变量会被事先提出来(变量提升),有的直接赋值,有的为默认值 ...