<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>设定基础连接颜色</title>

    <style>

        a:link{color: blue;}

        a:visited{color: red;}

        a:hover{color: yellow;}

        a:active{color:green;}

        /* a:link {color: #FF0000;}     未访问的链接

        a:visited {color: #00FF00;}  已访问的链接

        a:hover {color: #FF00FF;}    鼠标移动到链接上

        a:active {color: #0000FF}   选定的链接 */

        body{

            /*width: 100%;*/

            /*height: 800px;*/

            background: #f0f;

            color:red;

            font-size: 30px;

        }

    </style>

    <style>

        #one{

            font-size: 80px;

            color: yellow;

            background: #aaa;

        }

    </style>

</head>

<body id="ddd" background="../img/配图.png">

    <a href="https://www.baidu.com">sdf</a>

    <a href="https://www.baidu.com">fsdfsd</a>

    <a href="https://www.baidu.com">zsdfxzvxz</a>

    <a href="https://class.imooc.com/?mc_marking=4e0b0537f151197140fed11920097988&mc_channel=bdqdrmjt">dfddddf</a>

    <a href="https://i-beta.cnblogs.com/posts/edit-done;postId=12068740">sdfsdaf</a>

    <p id="one">这里的样式放在第二个style标签中，即第二个样式声明对象</p>

    <script>

        // document.styleSheets[n];    表示第n个样式声明对象，即表示第n个style标签

        // document.styleSheets[n].rules[h];   表示第n个样式声明对象，rules[h]表示第(h+1)个自定义规则

        // var dd=document.styleSheets[0].rules[4].style;   表示第一个style标签里面的的第5个自定义样式

        // document.styleSheets[0].rules[4].style.xx;  表示第一个style标签里面的的第5个自定义样式中的xx属性值。

        //document.styleSheets[0]第一个样式声明对象，即表示第二个style标签

        var dd=document.styleSheets[0].rules[4].style;

        console.log(dd.color);

        //document.styleSheets[1]第二个样式声明对象,即表示第二个style标签

        var two = document.styleSheets[1].rules[0].style;

        console.log(two['font-size']);

        // 内联标签中定义样式 <xx id="one" background="../img/bg.png" style="color;red;background:blue;font-size:30px;"></xx>

        // 内联样式可以直接使用：  document.getElementId('one').background;

        // var one = document.getElementById('one');

        // console.log(one.background);//这里是获取xx中的直接属性background，而不是style中定义的background。谨记！

    </script>

</body>

</html>

样式声明对象：document.styleSheets[0].rules[4].style;的更多相关文章

  1. document.styleSheets[0]是个啥

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. document.styleSheets

    伪元素是不能选中的,如果非要改他的样式,两个方法. 静态方法: addClass的时候,新add的class带有新的伪元素. 动态方法: 如果知道它在document.styleSheets对象中的位 ...

  3. windows对象 document对象 的一些操作 9.23

    函数: 四要素 1.返回类型2.函数名3.参数列表4.函数体 window . 对象 opener  打开当前窗口的源窗口  alert(window.opener); open( )     例子: ...

  4. document.forms[0].submit object is not a function

    今天在做项目的时候发现了一个问题:document.forms[0].submit object is not a function. 这个问题是在用JavaScript 代码来提交一个表单时发生的. ...

  5. 摘抄 - 不为人知的JS调用样式的方法---document.createElement().addRule(..)

    很多人可能在调用css样式都是使用传统的方式调用其实有很多方法可以进行调用,如使用内嵌样式,在html直接加入样式,给定外部样式文件,在外部样式文件中使用 @import url(样式文件路径),这些 ...

  6. DWZ错误的解决：0x800a13af - Microsoft JScript 运行时错误: 重新声明常量“document”

    在写完Login后,需要跳转到Index中,就是DWZ的主界面,结果出现如下问题: 0x800a13af - Microsoft JScript 运行时错误: 重新声明常量“document” 费了很 ...

  7. 利用js代码:document.forms[0].approval.value='false'，当点击 <input type="image"按钮向表单传递不同的参数。

    <form action="flow_myTaskList"> <input type="hidden" name="approva ...

  8. 利用样式——android2.3实现android4.0风格的edittext

    先看效果: 思路:在源码里找到4.0风格的图片作为背景,xml文件定义点击时候边框变化 步骤: ①.在F:\sdk\sdk\platforms\android-14\data\res\drawable ...

  9. BOM对象，math对象document对象的属性和操作和 事件的基本操作

    Math对象 //该对象中的属性方法 和数学有关. abs(x) 返回数的绝对值. exp(x) 返回 e 的指数. floor(x) 对数进行下舍入. log(x) 返回数的自然对数(底为e). m ...

随机推荐

  1. hdu 1427 速算24点【暴力枚举】

    速算24点 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  2. GO指南练习：切片

    最近开始GO语言的学习,在GO指南中练习到切片这个题目 练习:切片 实现 Pic.它应当返回一个长度为 dy 的切片,其中每个元素是一个长度为 dx,元素类型为 uint8 的切片.当你运行此程序时, ...

  3. 基于vue的分页插件

    相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下 ...

  4. [cf 1236 E] Alice and the Unfair Game

    题意: 给定一个长度为m的序列$A$,你有一个长度为n的棋盘,可以任选一个位置x作为起点. 在时刻$[1,m+1]$你可以向左或向右移动一格. 设时刻i你移动后所在的位置为$B_i$,你需要满足对于任 ...

  5. Bash速查表

    例 #!/usr/bin/env bash NAME="John" echo "Hello $NAME!" 变量 NAME="John" e ...

  6. MOOC 数据库笔记（四）：关系代数

    关系代数 关系代数概述 特点 基于集合,提供了一系列的关系代数操作:并.差.笛卡尔积(广义积).选择.投影和更名等基本操作 以及交.连接和关系除等扩展操作,是一种集合思维的操作语言. 关系代数操作以一 ...

  7. 4.将验证添加到 ASP.NET Core Razor 页面

    向 Movie 模型添加了验证逻辑. 每当用户创建或编辑电影时,都会强制执行验证规则. 1.打开Movie.cs文件.DataAnnotations命名空间提供了一组内置的验证属性,这些属性以声明方式 ...

  8. C# vb .net实现真实阴影特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的真实阴影效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...

  9. 1005 继续(3n+1)猜想（C#）

    一.题目内容: 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对 n= ...

  10. 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...