1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>设定基础连接颜色</title>
  6.     <style>
  7.         a:link{color: blue;}
  8.         a:visited{color: red;}
  9.         a:hover{color: yellow;}
  10.         a:active{color:green;}
  11.  
  12.         /* a:link {color: #FF0000;}     未访问的链接
  13.         a:visited {color: #00FF00;}  已访问的链接
  14.         a:hover {color: #FF00FF;}    鼠标移动到链接上
  15.         a:active {color: #0000FF}   选定的链接 */
  16.  
  17.         body{
  18.             /*width: 100%;*/
  19.             /*height: 800px;*/
  20.             background: #f0f;
  21.             color:red;
  22.             font-size: 30px;
  23.         }
  24.     </style>
  25.     <style>
  26.         #one{
  27.             font-size: 80px;
  28.             color: yellow;
  29.             background: #aaa;
  30.         }
  31.     </style>
  32. </head>
  33. <body id="ddd" background="../img/配图.png">
  34.     <a href="https://www.baidu.com">sdf</a>
  35.     <a href="https://www.baidu.com">fsdfsd</a>
  36.     <a href="https://www.baidu.com">zsdfxzvxz</a>
  37.     <a href="https://class.imooc.com/?mc_marking=4e0b0537f151197140fed11920097988&mc_channel=bdqdrmjt">dfddddf</a>
  38.     <a href="https://i-beta.cnblogs.com/posts/edit-done;postId=12068740">sdfsdaf</a>
  39.  
  40.     <p id="one">这里的样式放在第二个style标签中，即第二个样式声明对象</p>
  41.     <script>
  42.         // document.styleSheets[n];    表示第n个样式声明对象，即表示第n个style标签
  43.         // document.styleSheets[n].rules[h];   表示第n个样式声明对象，rules[h]表示第(h+1)个自定义规则
  44.         // var dd=document.styleSheets[0].rules[4].style;   表示第一个style标签里面的的第5个自定义样式
  45.         // document.styleSheets[0].rules[4].style.xx;  表示第一个style标签里面的的第5个自定义样式中的xx属性值。
  46.  
  47.         //document.styleSheets[0]第一个样式声明对象，即表示第二个style标签
  48.         var dd=document.styleSheets[0].rules[4].style;
  49.         console.log(dd.color);
  50.  
  51.         //document.styleSheets[1]第二个样式声明对象,即表示第二个style标签
  52.         var two = document.styleSheets[1].rules[0].style;
  53.         console.log(two['font-size']);
  54.  
  55.         // 内联标签中定义样式 <xx id="one" background="../img/bg.png" style="color;red;background:blue;font-size:30px;"></xx>
  56.         // 内联样式可以直接使用：  document.getElementId('one').background;
  57.         // var one = document.getElementById('one');
  58.         // console.log(one.background);//这里是获取xx中的直接属性background，而不是style中定义的background。谨记！
  59.     </script>
  60. </body>
  61. </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. Django框架之第四篇（视图层）--HttpRequest对象、HttpResponse对象、JsonResponse、CBV和FBV、文件上传

    视图层 一.视图函数 一个视图函数,简称视图,是一个简单的python函数,它接收web请求并且会返回web响应.响应可以是一张网页的html,一个重定向,或者是一张图片...任何东西都可以.无论是什 ...

  2. libevent源码分析三--signal事件响应

    libevent支持io事件,timeout事件,signal事件,这篇文件将分析libevent是如何组织signal事件,以及如何实现signal事件响应的. 1.  sigmap 类似于io事件 ...

  3. 一个Java程序员该有的良好品质

    一.前言 多年来,在IT领域,从一个普通的程序员到一个技术主管,再到一个技术经理,再到一个技术主管,他们践踏了许多坑,劳累了许多课程,还背着许多罐子.在提高他们的技术和管理能力的同时,他们一直在考虑如 ...

  4. 有关ajax跨域问题

    写在前面 JQuery ajax支持get方式的跨域,采用了jsonp来完成.完成跨域请求的有两种方式实现.一种是使用Jquery ajax最底层的Api实现跨域的请求,而另一种则是JQuery aj ...

  5. sqoop从mysql导数据到hive报错：Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure

    背景 使用sqoop从mysql导数据到hive,从本地服务器是可以访问mysql的(本地服务器是hadoop集群的一个datanode),但是sqoop导数据的时候依然连接不上mysql 报错如下: ...

  6. 关于zynq系列板卡设计VREFP_0参考电压的疑问及解答

    使用板卡:Z-turn Board 芯片:Xilinx Zynq-7010/7020处理器 有工程师在试用zynq系列Z-turn Board时提出:在原理图P3页 Bank0上VREFP_0端接地的 ...

  7. vue-router中的router-view的困扰

    刚开始接触vue的时候有很长一段时间被router-view的渲染困扰着,不知道为什么明明有很多router-link和不同的router-view,但是为什么渲染的时候不会出现错乱呢 这是我自己写的 ...

  8. Linq Left Join；linq左连接 （转载）

    来源 https://www.cnblogs.com/xinjian/archive/2010/11/17/1879959.html 准备一些测试数据,如下: use Test Create tabl ...

  9. selenium三个等待方法

    为什么需要等待时间:页面加载需要时间,如果页面没有加载完成,直接去定位,可能定位不到元素 1.强制等待: import time time.sleep(2) 不管有没有完成加载,必须等待2秒 2.隐式 ...

  10. 解决加载WEB页面时，由于JS文件引用过多影响页面打开速度的问题

    1.一般做法 一般我们会把所有的<script>元素都应该放在页面的<head>标签里,但由于是顺序加载,因此只有当所有JavaScript代码都被依次下载.解析和执行完之后, ...