专栏首页GreenLeavesJavaScript之Style属性学习

JavaScript之Style属性学习

当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式,

一、Style属性

文档中的每一个元素都是一个对象,每个对象又有着各式各样的属性。有一些元素告诉我们元素在节点树上的位置信息。比如说,parentNode、nextSibling、previousSibling、childNodes、

firstChild、lastChild这些属性,就告诉了我们文档中各节点的之间的关系信息。又有一些属性比如nodeType、nodeName、nodeValue(这个属性注意只能获取文本元素节点的节点值)这些属性,告诉我们元素本身的信息。

除此之外,文档的每个元素都还有一个属性style。style属性包含着元素的样式,查询这个属性返回的是一个对象而不是一个简单的字符串。样式都存放在这个style对象的属性里。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/utility.js" type="text/javascript"></script>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <style  type="text/css">
    p
    {
      color:blue;
        }
    </style>
    
</head>
<body>
<p>asdas</p>
<script type="text/javascript">
    window.onload = function () {
        var para = document.getElementsByTagName("p")[0];
        alert(typeof para.style);
    }
</script>
</body>
</html>

输出:object;  说明style属性确实是一个对象;

这样我们就可以使用DOM的style属性去获取对应元素对象的style属性了,但是这里必须注意,必须谨记的一个地方,DOM 的style属性只能获取html标签内内嵌的style属性像下面代码这样:

<p style="color:Blue; font-size:16px;">asdas</

使用Style属性的注意点一:

如果标签的样式被定义在了外部文件里面,DOM将获取不到外部文件里面的style属性值。牢记这点很重要;

也许有人会认为那么这个DOM的style属性将没有任何的实用价值,应为我们在开发中一般会将表现和样式分离,几乎都会将样式表放入到外部css文件里面,这个时候就看你怎么使用DOM的style属性了,因为虽然我们无法获取外部文件里面的style属性,但是我们可以获取我们给DOM设置的样式,也就是说DOM的style属性不仅可以获取元素的style属性,还能给元素设置style属性,而我们给元素设置的style属性我们可以用DOM的style属性来获取。

使用Style属性的注意点二:

当我们使用Style属性去获取像font-weight和font-family这类的属性时,不能这些获取

目标元素.style.font-weight 

应为你如果这样获取,JavaScript解释器会把font-weight中间的‘-’当作减号来看那上面这句代码的意思就变成(目标元素.style.font)减去weight变量的值,这将完全违背我们的本意.

所以这边DOM有相关的处理方法,当你需要引用一个中间带减号的css属性时,DOM要求你用驼峰命名法。css属性font-family编程fontFamily,其他类似的属性也用相同的方法操作。

二、Style属性实战

介绍完style属性之后,下面开始上代码了,代码如下

html:

html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: "Helvetaica" , "Arial" ,sans-serif;
            background-color: #fff;
            color: #000;
        }
        table
        {
            margin: 0;
            border: 1px solid #699;
        }
        caption
        {
            margin:auto;
            padding:.2em;
            font-size:1.2em;
            font-weight:bold;
        }
        th
        {
            font-weight:normal;
            font-style:italic;
            text-align:left;
            border:1px dotted #699;
            background-color:#9cc;
            color:#000;
            }
            tr
            {
             cursor:pointer;     、
                }
            th,td
            {
                width:10em;
                padding:.5em;
                }
    </style>
</head>
<body>
    <div>---------</div>
    <table>
        <caption>
            Itinerary(旅程,路线)</caption>
        <thead>
            <tr>
                <th>
                    When
                </th>
                <th>
                    Where
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    June 9th
                </td>
                <td>
                    Portland,<abbr title="Oregon">OR</abbr>
                </td>
            </tr>
            <tr>
                <td>
                    June 10th
                </td>
                <td>
                    Seattle,<abbr title="Washington">WA</abbr>
                </td>
            </tr>
            <tr>
                <td>
                    June 12th
                </td>
                <td>
                    Sacramento,<abbr title="California">CA</abbr>
                </td>
            </tr>
        </tbody>
    </table>
    <div>---------</div>
    <div>---------</div>
    <script src="../js/utility.js" type="text/javascript"></script>
    <script src="../js/index.js" type="text/javascript"></script>
    <script type="text/javascript">
        var insertposition = document.getElementsByTagName("div")[1];//指定缩略语列表的插入位置
        displayAbbreviations(insertposition);
        var loadeventlist = [stripeTable,displayAbbreviations];//将两个js方法放入window.onload队列里面
        addOnloadEventlist(loadeventlist);
    </script>
</body>
</html>

js代码:

//设置表格各种特性
function stripeTable() {
    if (!checkCompatibility) return;
    var tables = document.getElementsByTagName("table");
    for (var i = 0; i < tables.length; i++) {
        var rows = tables[i].getElementsByTagName("tr");
        alert(rows[0].innerHtml);
        var flag = false;
        for (var j = 0; j < rows.length; j++) {
        //表格隔行变色效果逻辑
            if (flag == true) {
                rows[j].style.backgroundColor = "#ffc";
                flag = false;
            }
            else {
                flag = true;
            }
            //鼠标放上去当前行文本加黑加粗
            rows[j].onmouseover = function () {
                this.style.fontWeight = "bold";
            }
            rows[j].onmouseout = function () {
                this.style.fontWeight = "normal";
            }
        }
    }
}

/*
检查浏览器的兼容性,是否支持查用的DOM方法
check the compatibility of the broswer
*/
function checkCompatibility() {
    if (!document.getElementById) return false;
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;
    if (!document.getElementsByTagName) return false;
    if (!document.getElementsByName) return false;
    return true;
}
/*
addOnloadEvent的扩展版因为每次添加一个函数都需要调用addOnloadEvent()函数,所以为了节省代码,将需要绑定的函数名写入到一个数组里面,
然后将数组引用,传递给addOnloadEventlist();每次添加,只需将函数名,写到数组里面即可
@param eventlist  -需要与window.onload事件绑定的函数名数组
*/
function addOnloadEventlist(eventlist) {
    if (!eventlist) return false;
    var oldonload = window.onload;
    window.onload = function () {
        for (var i = 0; i < eventlist.length; i++) {
            eventlist[i]();
        }
    }
}

说下效果:简单实现table表格的隔行变色,和当鼠标在数据行上悬浮时,数据加黑加粗显示;

实现这个效果的关键是如下代码:

 rows[j].style.backgroundColor = "#ffc";  //当前行的背景色变成#ffc
 this.style.fontWeight = "bold"; //当前行的字体颜色加粗
 this.style.fontWeight = "normal"; //当前行的字体从加粗变为正常

这三段代码分别利用style属性设置了当我们的动作发生时,table表格相应的会做那些变化;

但是我们仔细思考下,如果这里有一天我们的需求变了,这个表格隔行变色的背景色了,我们要换个颜色,这时候我们又要来修改js代码,而且这不是关键,关键是如果我们还需要加其他的显示效果,这个时候为了加这个效果,我们必须在加一行代码,所以这种方式添加效果的方式并不是很好。所以这个时候如果把Css和JavaScript结合往往能产生很好的效果,关于这个你可以去我的下一个随笔关于className属性的介绍http://www.cnblogs.com/GreenLeaves/p/5757216.html

这篇随笔就是教我们如何通过DOM的className属性来减少我们对控制元素样式的代码量。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript之面向对象的概念,对象属性和对象属性的特性简介

      一、大家都知道,面向对象语言有一个标志,那就是他们都有类的概念,通过类我们可以创建任意多个具有相同属性和方法的对象。但ECMAScript(指定JavaSc...

    郑小超.
  • JavaScript之面向对象学习二(原型属性对象与in操作符)获取对象中所有属性的方法

    1、原型属性对象于in操作符之in单独使用 有两种方式使用in操作符:单独使用和在for-in循环中使用。在单独使用中,代码如下: function Pe...

    郑小超.
  • JavaScript之<script>标签简介

    向html页面中插入JavaScrpt的主要方法,就是使用<script>元素,下面是Html 4.01为<script>定义的6个属性。 1、async:可选...

    郑小超.
  • LaTeX 折腾系列 | Linux 字体安装记录

    在使用 LaTeX 进行中文字体编译排版过程中,发现 CentOS 6.5 中缺乏很大一部分中文字体,以至于在编译过程中频繁抛出缺乏字体的错误。 现在基于 wi...

    Steven Shen
  • user-modify跟style标签可真是天生一对?

    前来挖墙脚的是html中的contenteditable,他是一个全局属性,可以大致理解为"可以使一个元素处于可编辑状态",像极了textarea,不过还是存在...

    聪明的汤姆
  • 网页的修饰

    总第61篇 上一篇推送了网页的基本构成,链接地址:网页是怎么构成的?,这篇来讲讲网页的修饰,正如字面意思一般,本篇分享的内容是用来修饰网页的,是让网页变得更加好...

    张俊红
  • SAP UI5 Web Component里如何自定义CSS style

    在public文件夹的index.html里的head标签页里,添加一个style设置:

    Jerry Wang
  • Vue项目中scoped属性的作用,及scoped穿透

    我们在使用 Vue 的开发新项目的时候,会发现 Vue 给 <style> 标签添加了一个 scoped 属性。

    德顺
  • CentOS 6.X 安装中文字体

    由于业务需要,需要对CentOS6.9添加中文字体支持 安装工具包 yum install -y fontconfig mkfontscale 安装完成后...

    shaonbean
  • 三种方式解决vue中v-html元素中标签样式

    三.通过 >>> 可以使得在使用scoped属性的情况下,穿透scoped,修改其他组件的值

    honey缘木鱼

扫码关注云+社区

领取腾讯云代金券