精华内容
下载资源
问答
  • javascript创建css样式方法

    千次阅读 2011-05-05 14:47:00
    有很多方法可以调用css样式,如使用内嵌样式,在html直接加入样式,给定外部样式文件,在外部样式文件中使用@import url(样式文件路径),这些都是大家常用的,其实还有就是使用javascript进行样式的定义. 第一种: ...

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

    第一种:

    var style = document.createElement(’link’);
    style.href = ’style.css’;
    style.rel = ’stylesheet’;
    style.type = ‘text/css’;
    document.getElementsByTagName(’HEAD’).item(0).appendChild(style);

    第二种简单:

    document.createStyleSheet(‘style.css’);

     

    使用字符串动态创建 style 节点:

    var style = document.createElement(’style’);
    style.type = ‘text/css’;
    style.innerHTML=”body{ background-color:blue; }”;
    document.getElementsByTagName(’HEAD’).item(0).appendChild(style);

    但是在上面只能在Firefox兼容,在IE里却不支持。

    var sheet = document.createStyleSheet();
    sheet.addRule(’body’,'background-color:red’);

    如果按照上面的话就能兼容IE成功,但是很麻烦,要把字符串拆开写。

     

    还有一种方法:

    document.createStyleSheet(”javascript:’body{background-color:blue;’”);

    但用上面的javascript代码唯一的缺点就是参数url 最大 255 个字符,长一点的就不行了,将代码进行修改成如下:

    window.style=”body{background-color:blue;”;
    document.createStyleSheet(”javascript:style”);

     

    完整代码如下:(document.all兼容IE)

    window.style="body{background-color:blue;";

    if(document.all){
        document.createStyleSheet("javascript:style");
    }else{
        var ss= document.createElement('style');
        ss.type = 'text/css';
        style.innerHTML=window.style;
        document.getElementsByTagName('HEAD').item(0).appendChild(ss);
    }
    }

    展开全文
  • 创建CSS样式表的三种方式

    千次阅读 2018-08-20 21:46:57
    创建CSS样式表的三种方式 外部样式表 当样式需要应用于很多页面时,外部样式表将是理想的选择 创建一个以.css为扩展名的外部样式表,在里面写CSS语句 使用link标签引入到html页面中 base.css文件 *{ ...

    创建CSS样式表的三种方式

    外部样式表

    • 当样式需要应用于很多页面时,外部样式表将是理想的选择
    • 创建一个以.css为扩展名的外部样式表,在里面写CSS语句
    • 使用link标签引入到html页面中
    • base.css文件
    *{
        padding: 0;
        margin: 0;
    }
    a{
        text-decoration: none;
    }
    ul ol li{
        list-style-type: none;
    }
    • html文件 注意引用语句
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>外部样式表测试</title>
            <link rel="stylesheet" type="text/css" href="css/base.css"/>
        </head>
        <body>
            <a href="#">我这个链接没有下划线了</a>
            <ol>
                <li>列表没有前面的标点了</li>
                <li>列表没有前面的标点了</li>
                <li>列表没有前面的标点了</li>
                <li>列表没有前面的标点了</li>
            </ol>
        </body>
    </html>

    内部样式表

    • 当单个文档需要特殊的样式时,就应该使用内部样式表
    • 在html的head中用style标签定义内部样式表
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    color: red;
                }
            </style>
        </head>
        <body>
            <p>我变红了</p>
            <a href="#">我也变红了</a>
        </body>
    </html>

    内联样式

    • 当你要针对某一元素进行定制时,应该使用内联样式
    <p style="color: red; font-size: 20px;">我又大又红</p>

    样式表的与优先级

    • 内联样式 > 内部样式表 > 外部样式表
    展开全文
  • 最近特别无聊,写了些脚本优化下浏览器浏览体验 单节点,或者一个节点,我们修改样式是这样的 let kuai = document....但是如果需要设定的样式有几十个,相同的样式,并且这种样式在页面中的css是...

    参考文章 https://www.cnblogs.com/stephenykk/p/5406614.html

    最近特别无聊,写了些脚本优化下浏览器浏览体验

     

    单节点,或者一个节点,我们修改样式是这样的

    let kuai = document.querySelector('.xxx')
    kuai.style.backgroundColor = 'black'

    1.获取节点

    2.通过节点style修改指定样式

     

    但是如果需要设定的样式有几十个,相同的样式,并且这种样式在页面中的css是没有的,那么就需要使用js动态创建一个css样式来供节点调用

    于是乎,第一种方法 使用 document.createStyleSheet  因为 IE 仅有  chrom不支持 不多说

     

    正餐!!:通过创建style节点,再赋值

    1.创建style,并写入class,再添加进head

                let style = document.createElement('style')
                style.type = 'text/css';
                style.innerHTML = `
                     .single_kuai_light{
                         height:70px;
                         width:70px;
                     }
                `
                document.querySelector('head').appendChild(style)

    2.找到节点后,通过classList 添加

    let kuai = document.createElement('div')
    kuai.classList.add('single_kuai_light')

     

    展开全文
  • 创建CSS 样式表有三种方式

    千次阅读 2016-11-24 20:02:47
    创建CSS 样式表有三种方式:1.元素内嵌样式;2.文档内嵌样式;3.外部引入样式。 (1) 元素内嵌样式这是一段文本 解释:即在当前元素使用style 属性的声明方式。 (2) 文档内嵌样式: 在元素之间创建元素,通过选择...

    创建CSS 样式表有三种方式:1.元素内嵌样式;2.文档内嵌样式;3.外部引入样式。

    (1) 元素内嵌样式<p style="color:red;font-size:50px;">这是一段文本</p>

    解释:即在当前元素使用style 属性的声明方式。

    (2) 文档内嵌样式: <head>元素之间创建<style>元素,通过选择器的方式调用指定的元素并设置相关CSS

                        <style type="text/css">

                        p {color: blue;

                            font-size: 40px;}

                          </style>

     (3) 外部引用样式

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

                  //style.css

                    @charset "utf-8";表明设置CSS 的字符编码

     

    展开全文
  • 用原生js操作css样式方法总结

    千次阅读 2018-07-17 11:39:45
    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限...一、可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式  如:var elm = document.getElementById('test');  ...
  • HTML插入CSS样式方法总结

    千次阅读 2015-06-04 23:12:23
    在HTML中插入CSS方法主要有三种,它们分别是内联样式、内部样式、链接式和外部样式。本文结合的具体的例子,总结HTML插入CSS方法
  • CSS样式规则

    千次阅读 2019-10-02 14:39:51
    CSS样式规则 使用HTML时,需要遵从一定的规范。CSS也是如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则,具体格式如下:选择器 {属性:属性值;属性:属性值;}如:h1 {color:red; font-size:20px;} 在...
  • css样式表的使用方法

    千次阅读 2013-03-22 12:36:19
    第3章 CSS样式表的使用方法 一、教学目标 1.理解什么是CSS样式表,及CSS样式表在网页制作中的重要作用 2.掌握CSS样式表的基本结构; 3.掌握常见的三种(标签名、类、ID)选择器 4.理解在 HTML 中引用CSS样式表...
  • 动态通过JS创建DOM后没有CSS样式

    千次阅读 2018-02-27 16:06:40
    通过js动态创建的没有样式,我们可以自己设置css样式达到效果 td.setAttribute('style','border:1px #DDDDDD solid ;padding:5px'); 这是我创建表格后没有表格的线手动添加设置的css
  • 创建漂亮的CSS样式

    千次阅读 2011-09-17 14:01:20
    作为一个CSS方面的专家,所做的不只是记住选择符(Selectors)那么简单,提升样式表的效用和可维护性,以及设计蓝图和管理工作流程都是工作的一部分.在本篇文章中,Jina Bolton给出了10个CSS技巧提示,这些内容是由对12位...
  • JS动态创建css的两种方法

    万次阅读 2017-08-11 17:41:03
    动态创建css样式有两种方式: 1.引入外部css文件  2.插入css代码片段  动态插入css外部文件的方法: function loadStyle(url){ var link = document.createElement('link'); link.type = 'text/css'; link...
  • CSS样式

    2006-10-27 17:01:00
    CSS的三种类型 1、自定义CSS样式(类样式):使你可以将样式属性设置为任何文本范围或文本块。...创建或更改标签的CSS样式时,所有用标签设置了格式的文本都立即更新。如:h1{font-family:Arial} 
  • 动态创建了一个select标签,var el = document.createElement('select'); 怎样制定select 的宽度,el.width="100px",不行,el.setAttribute("style","width:100px")也不行,有没有其他方法?用的ie8.
  • css下拉菜单样式Introduction: 介绍: As we all know that the styling website or web pages are an important aspect of web development. One must put utmost attention to the styling of their web pages ...
  • 由于 React的JSX语法,能在React中使用样式的方式有很多,本文主要介绍在React中经常使用CSS样式的五种方法:  //1行内样式 // 2声明样式 // 3引入样式 // 4 CSS Modules模块化 // 5 Styled-component   ...
  • DreamWeaver下如何应用CSS样式

    千次阅读 2017-09-07 17:40:59
    首先介绍一下CSS样式的属性: CSS样式属性被分为八大类:类型,背景,区块,边框,列表,定位,扩展。 类型主要定义文本的字体,大小,颜色,行高和修饰等。如图所示: 方法一: 内联样式可以通过style...
  • .net动态加载CSS样式方法总结

    千次阅读 2011-12-29 18:14:21
    方法一:利用Page类写入 WebForm1 ... protected void Page_Load(object sender, EventArgs e) ... Page.RegisterStartupScript("css",@"mycss.styleSheet.addImport('stylesheet1.css')"); }   方法
  • CSS样式

    千次阅读 2012-09-22 21:23:38
    CSS样式表 字体: CSS是CascadingStyle Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 引入外部样式表 title of article 而在xml中,...
  • CSS基础1——CSS样式表及样式规则

    千次阅读 2014-10-08 22:00:32
    1、CSS层叠样式表 2、CSS样式表,包括内联样式表,嵌入式样式表,外部样式表 3、样式表的规则,包括选择器,声明块,属性等。
  • 如何连接外部CSS样式

    千次阅读 2012-10-11 11:06:51
     外部CSS样式是一个独立的CSS文件,当在网页中直接创建外部CSS样式时,该样式自动应用到网页中;当在创建空白网页时,通常可以附加已经存在的外部样式表。如果CSS样式文件已经存在,制作网页时可以通过【CSS样式】...
  • vue css样式重置

    千次阅读 2018-11-04 11:21:09
    css样式重置官网 在static下新建一个css文件夹再创建一个 reset.css的文件把在官网中Toolbox下的样式粘贴进去 然后在index.html中引入 &lt;link rel="stylesheet" href="./static/css/...
  • 1)外部样式是CSS样式中较为理想的一种形式。将CSS样式代码单独地放在一个独立的文件中,由页面进行调用,多个网页可以调用一个外部样式文件,因此可以实现代码的最大化使用及网站文件的最优化配置。一般是采用 在...
  • HTML中CSS样式的优先级

    万次阅读 2018-04-24 12:53:10
      css样式的优先级基于它的继承性。在此篇没有提及标签选择器和通配符选择器,但它们的优先级很低,仅高于body!   并且所介绍的都是单个选择器的优先级,因为组合型的选择器就是单个选择器优先级的累加。 css...
  • DOM删除元素和更改css样式方法

    千次阅读 2018-08-20 23:29:38
    1.创建元素 首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。 var p3=document.createElement("p"); var node=document.createTextNode("you are beautiful!");//给元素内...
  • 添加css样式的三种方法

    千次阅读 2014-10-11 18:50:52
    1.行内样式  即使用style属性,将CSS直接写在HTML标签中。  例如:这行段落将显示为红色。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 203,171
精华内容 81,268
关键字:

创建css样式的方法