javascript检索样式

今天看了《javascript DOM 编程艺术》第二版的第150页:书上说javascript只能获取内联样式的值,无法获取内部样式表和外部样式表的值,特作此测试:

内联样式表:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="example" style="color:grey; font: 12px ‘Arial‘, sans-serif">what fuck</p>
    
    <script type="text/javascript">
        var para = document.getElementById("example");
        alert(para.style.fontSize);
    </script>
</body>
</html>

内联样式表:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #example{
        color:grey;
        font: 12px ‘Arial‘, sans-serif;
    }
    </style>
</head>
<body>
    <p id="example">what fuck</p>

<script type="text/javascript">
        var para = document.getElementById("example");
        alert(para.style.fontSize);
    </script>
</body>
</html>

外部样式表:

html部分的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <p id="example">what fuck</p>

<script type="text/javascript">
        var para = document.getElementById("example");
        alert(para.style.fontSize);
    </script>
</body>
</html>

index.css部分的代码:

#example{
    color:grey;
    font: 12px ‘Arial‘, sans-serif;
}

经调试:

chrome firefox opera safari IE都遵循javascript只能检索内联样式表的值。

ps:如有疑问,可以探讨。

时间: 2024-09-29 23:30:45

javascript检索样式的相关文章

通过JavaScript设置样式和jQuey设置样式,还有随机数抛出水果的习题

一:通过JavaScript的方式设置样式(:拿习题为例): var shuiguo = document.getElementById('fruit');     shuiguo.style.backgroundColor = 'Red';                                                    //1     shuiguo.onclick = function () {     shuiguo.style.cssText = "backgrou

javascript 获取样式表里的属性值 currentStyle 和 getComputedStyle 的使用

很多时候我们要获取 CSS 样式表里面的值(非行间样式),而获取行间样式的属性值那么这用 obj.style.attr 就能获取得到,那么怎么样才能获取到CSS样式表里面的值呢,那么就要请出我们的主角 currentStyle 和 getComputedStyle ,简要的介绍一下他们,再封装一个函数来兼容各个浏览器. 介绍: currentStyle :这个属性是 IE 浏览器上使用的. getComputedStyle :这个方法是 搞基 浏览器上使用的. 封装: //这里的 obj 参数指

原生JavaScript根据样式名称检索元素对象

function getElementsByClassName(name) { var tags = document.getElementsByTagName('*') || document.all; var els = []; for (var i = 0; i < tags.length; i++) { if (tags[i].className) { var cs = tags[i].className.split(' '); for (var j = 0; j < cs.lengt

javascript 动态样式添加

异步加载css文件或者异步加载css模块,支持所有浏览器,包括IE,参考至javascript高级编程 1.createLink方法用于创建一个style标签并添加到head标签中 2.createModule方法用于创建一个style样式表的标签,并且如果在IE8以下的版本运行会抛出异常,在异常捕获模块中执行style.styleSheet.cssText兼容IE添加style的样式内容. <button id="demo">css文件</button> &l

Javascript操作样式

1.修改样式 修改元素的样式是className属性 class是Javascript的一个保留字,属性不能用关键字.保留字,所以就变成了className了. 修改元素的样式 this.style.backgroundColor="red"; obj.style.cssFloat="right"; 注意 (1)在css中的属性名在Javascript中操作的时候,属性名可能不一样,主要集中在那些属性名中含有-的属性,因为Javascript中-是不能做属性.类名的

javascript检索算法代码举例

今天看到一篇谈javascript的文章.引起我的好奇.主要讲查找数据有2种方式,顺序查找和二分查找.顺序查找适用于元素随机排列的列表.二分查找适用于元素已排序的列表.二分查找效率更高,但是必须是已经排好序的列表元素集合. 在多是泛泛之谈的今天.有这个javascript的文章实属难得.在这篇CODEGO.NET的javascript文章里面谈的主要是检索算法.包括数据结构与算法的一些演示. 个人觉得挺有用.所以不敢独享就发出来.加上我自己的一些经验之谈了. 一:顺序查找 顺序查找是从列表的第一

JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)

层叠样式 表和动态HTML 层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准. 使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DHTML) CSS样式是一个名称/值的属性列表指定的,属性之间用分号隔开,名字属性和值属性之间用冒号隔开. 1.给文档元素应用样式规则(两种方法) a.在HTML标记的style属性中使用它们.如:<p style=margin-left:Lin;margin-right:lin;"/> b.使用样式

javascript改变样式(cssFloat,styleFloat)

昨天遇到一用js改变元素浮动的,当时直接写了 obj.style.float="left";结果没起作用:查了资料后才发现不能这样写,现在整理下几种样式写法 1,直接写css属性的,如:obj.style.height/width/color/position等 2,要改大写的,如:obj.style.fontSize/marginLeft/backgroundColor等 3,float,此属性在IE中用obj.style.styleFloat="left"; 在

javascript 行间样式与非行间样式获取方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .style001 {width: 300px;height: 300px;margin: 20px;padding: 30px;border: 20px gr