精华内容
下载资源
问答
  • 外链样式
    2020-12-24 09:41:20

    蚂蚁部落

    以上代码可以将字体颜色设置为红色。

    二.外链样式表:

    外链样式表就是通过在网页头部利用link标签引用一个单独的css文件,代码如下:

    三.嵌入式样式表:

    嵌入式样式表就是使用定义在当前页面内的css样式,代码如下:

    更多相关内容
  • 主要介绍了js获取元素外链样式的方法,分别在标准浏览器与IE浏览器两种情况下实现获取对应样式的功能,是非常实用的技巧,需要的朋友可以参考下
  • 在标准浏览器中可以通过window.getComputedStyll(obj,null)[property]来获取外链样式,但是在ie浏览器中则是通过obj.currentStyle来获取。 完整html代码: <!DOCTYPE html> <html> <head> <...
  • 【行间样式获取】 测试</div>  [removed]  var odiv=document.getElementById('div1'); //先获取到要获取样式的元素标签,也就是获取到div1  console.log(odiv.style.background); //这样我们就可以获取到了行...
  • 下面小编就为大家带来一篇 JavaScript 获取 css 行间样式 , 内连样式和外链样式的简单方 法小编觉得挺不错的现在就分享给大家也给大家做个参考 行间样式获取 <div id='div1' style="backgroud:red> 测试 </...
  • css初识及引入样式 概念:css通常称为css样式表或层叠样式表 作用: - 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式 - css以...

    css初识及引入样式

    概念:css通常称为css样式表或层叠样式表
    作用:

     - 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式
     - css以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
    

    引入css样式表的三种方式:

    1)行内式(内联样式)

    • 概念:称行内样式、行间样式,是通过标签的style属性来设置元素的样式
    • 基础语法<标签名 style="属性1:属性值1;属性2:属性值2;">内容</标签名>
    • 注意:
      style其实就是标签的属性
      样式属性和值之间用:
      多组属性值之间用;隔开
      只能控制当前的标签和嵌套在其中的字标签,造成代码冗(rong)余
    • 缺点:没有实现样式和结构的分离

    2)内部样式表(内嵌样式表)

    • 是将css代码集中写在HTML文档的head头部标签中,并且用style标签定义
    • 基础语法
    <head>
        <style type="text/css">
            div{
                color: red;
                font-size: 12px;
            }
        </style>
    </head>
    
    • 注意
      style标签一般位于head标签中,理论上他可以放在HTML文档的如何地方。
      type="text/css"在html中可以省略。
      只能控制当前的页面。

    • 缺点:没有彻底分离

    3)外部样式表(外链式)

    • 概念:是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中
    • 基本语法
    <head>
        <link rel="stylesheet" type="text/css" href="css文件路径">
    </head>
    
    • 注意
      link是一个单标签
      link标签要放在head头部标签中,并且指定link的三个属性
    属性作用
    rel定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。
    type定义所链接文档的类型,在这里需要指定为"text/CSS",表示链接的外部文件为CSS样式表。我们都可以省略
    href定义所有链接外部样式表文件的url,可以是绝对路径也可以是相对路径
    • 缺点:需要引入

    CSS样式总结:

    1. 选择器用于指定css样式作用的HTML标签,花括号内是对该对象设置的具体样式
    2. 属性和属性值以“键值对”的形式出现
    3. 属性是对指定的对象设置的样式属性
    4. 属性和属性值之间用“.”连接
    5. 多个“键值对”之间用“;”,进行区分
    展开全文
  • export {methods: {样式更新updateStyle(stylecon,oldCulster,newCluster) {let newStyleCon=stylecon;oldCulster.forEach((color,index)=>{let regexp= '';if (color.split(',').length > 1) {const rgbArr= ...

    export {

    methods: {样式更新

    updateStyle(stylecon,oldCulster,newCluster) {

    let newStyleCon=stylecon;

    oldCulster.forEach((color,index)=>{

    let regexp= '';if (color.split(',').length > 1) {

    const rgbArr= color.split(',');

    regexp= new RegExp("\\s*" + rgbArr[0] + "\\s*,\\s*" + rgbArr[1] + "\\s*,\\s*" + rgbArr[2] + "\\s*",'ig');

    }{

    regexp= new RegExp(color,1)">);

    }

    newStyleCon =newStyleCon.replace(regexp,newCluster[index])

    })newStyleCon;

    },得到需要修改的一系类颜色值

    getThemeCluster(theme) {

    const clusters=[theme];for (let i = 0; i <= 9; i++) {

    clusters.push(this.getTintColor(theme,Number(i / 10).toFixed(2)));

    }

    clusters.push(this.getShadeColor(theme,0.1));clusters;

    },1)"> 得到色调颜色

    getTintColor(color,tint) {

    let red= parseInt(color.slice(0,2),16);

    let green= parseInt(color.slice(2,4),1)">);

    let blue = parseInt(color.slice(4,6),1)">);

    if (tint == 0) {return [red,green,blue].join(',1)">);

    } {

    red+= Math.round((255 - red) *tint);

    green+= Math.round((255 - green) *tint);

    blue+= Math.round((255 - blue) *tint);

    red= red.toString(16);

    green= green.toString(16);

    blue= blue.toString(16);`#${red}${green}${blue}`

    }

    },1)"> 获取阴影色调颜色

    getShadeColor(color,shade) {

    let red= parseInt(color.slice(0,1)">);

    red = Math.round((1 - shade) *red);

    green= Math.round((1 - shade) *green);

    blue= Math.round((1 - shade) *blue);

    red= red.toString(16);

    green= green.toString(16);

    blue= blue.toString(16`#${red}${green}${blue}`

    },1)"> 获取外链css文本内容

    getCSSText(url) {return new Promise((resolve,reject) =>{

    const xhr= XMLHttpRequest()

    xhr.onreadystatechange= () =>if (xhr.readyState === 4 && xhr.status === 200) {

    const styleText= xhr.responseText.replace(/@font-face{[^}]+}/,'')

    resolve(styleText);

    }

    }

    xhr.open('GET'function(src) {if (/^(http|https):\/\//g.test(src)) {src;

    }

    let filePath= .getFilePath();

    let count= 0;

    const regexp= /\.\.\//g;while(regexp.exec(src)) {

    count++;

    }while (count--) {

    filePath= filePath.substring(0,filePath.lastIndexOf('/'));

    }return filePath + "/" + src.replace(/\.\.\//g,"");

    },1)"> 获取当前window的URL地址

    getFilePath: () {

    const curHref=window.location.href;if (curHref.indexOf('/#/') != -1return curHref.substring(0,curHref.indexOf('/#/'));

    }{);

    }

    },1)"> 修改主题色-head样式以及DOM行内样式

    async setThemeColor(newval,1)">typeof newval !== 'string') ;

    const newThemeCluster= this.getThemeCluster(newval.replace('#',1)">));

    const orignalCluster = this.getThemeCluster(oldval.replace('#',1)"> 获取原始值中包含rgb格式的值存为数组

    const rgbArr = orignalCluster[1].split(',1)">);

    const orignalRGBRegExp = new RegExp("\\(\\s*" + rgbArr[0] + "\\s*,\\s*" + rgbArr[2] +

    "\\s*\\)",'i'获取外链的样式内容并替换样式

    let styleTag = document.getElementById('new-configTheme__styles');

    const tagsDom= document.getElementsByTagName('link'if (!styleTag &&tagsDom.length) {

    styleTag= document.createElement('style')

    styleTag.setAttribute('id','new-configTheme__styles')

    document.head.appendChild(styleTag);

    const tagsDomList=Array.prototype.slice.call(tagsDom);

    let innerTextCon= ''for (let i = 0; i < tagsDomList.length; i++) {

    const value=tagsDomList[i];

    const tagAttributeSrc= value.getAttribute('href');

    const requestUrl= .getRequestUrl(tagAttributeSrc);

    const styleCon= await .getCSSText(requestUrl);new RegExp(oldval,'i').test(styleCon) ||orignalRGBRegExp.test(styleCon)) {

    innerTextCon+= .updateStyle(styleCon,orignalCluster,newThemeCluster);

    }

    }

    styleTag.innerText=innerTextCon;

    }获取页面的style标签

    const styles = [].slice.call(document.querySelectorAll('style')).filter((style) =>{

    const text=style.innerText;orignalRGBRegExp.test(text);

    })获取页面的style标签内容,使用updateStyle直接更新即可

    styles.forEach((style) =>{

    const {

    innerText

    }=style;typeof innerText !== 'string') ;

    style.innerText= .updateStyle(innerText,newThemeCluster);

    })获取DOM元素上的style

    const domAll = [].slice.call(document.getElementsByTagName('*')).filter((dom,index) =>{

    const stylCon= dom.getAttribute('style'return stylCon && (orignalRGBRegExp.test(stylCon))

    })

    domAll.forEach((dom)=>{

    const styleCon= dom.getAttribute('style');

    dom.style= 标签中样式以及DOM元素style的行内元素的样式。

    重要:外链的样式最好是压缩的样式,比如在vue-cli脚手架中,本地开发环境需要把样式提取到一个文件,并且压缩,dev.config.js部分代码如下:

    const ExtractTextPlugin = require('extract-text-webpack-plugin') 提取CSS

    const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 压缩CSS

    const devWebpackConfig=merge(baseWebpackConfig,{

    module: {

    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap,extract:true})

    },plugins: [...省略其他代码

    ExtractTextPlugin({

    filename:'bundle.css'}),1)"> OptimizeCSSPlugin({

    cssProcessorOptions: config.build.productionSourceMap? { safe: false} }

    : { safe:}

    })

    ]

    })

    参考地址

    总结

    如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

    小编个人微信号 jb51ccc

    喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

    展开全文
  • js盒子模型:通过js提供的属性和方法,... 获取元素的外链样式: window.getComputedStyle(ele,null)第二个参数是元素伪类(ie6-8不兼容) el.currentStyle.attr (ie6-8) //获取浏览器类型 window.navigator.userAgent

    js盒子模型:通过js提供的属性和方法,获取元素的信息;

    client系列:

    内容的高度,宽度就是我们设置元素的width,height,

    如果没有设置高度,容器中的高度会跟着内容自适应,这样获取的值,就是真实的内容高度;

    如果设置高度,内容溢出,clientHeight获取的也只能是设置的height;

    clientHeight,clientWidth:内容的高度,宽度+padding;

    clientLeft,clientTop左边框,上边框的宽度(borderwidth)

    contentEditable:boolean值,内容是否可编辑;el.contentEditable = true

    offset系列

    offsetWidth/offsetHeight =clientHeight/clientWidth+border上下/border左右

    offsetParent:当前元素的父级参照物

    offsetTop /offsetTop =当前元素的外面框距离父级参照物内边框的的距离;(margin)

    scroll系列

    scorllwidth scrollHeight :clientWidth类似(前提是我们的容器中没有溢出的内容);

    如果容器中有内容溢出,我们获取的结果:

    scrollWidth:真实内容的宽度(包含溢出)+左填充

    scrollHeight:真实内容的高度(包含溢出)+上填充

    scrollLeft scrollTop

    关于操作浏览器盒子模型信息兼容性:

    document.documentElement.clientHidth || document.body.clientHidth

    document.body.clientHidth:当前浏览器可视窗口的高度;

    document.body.scrollHidth:当前页面的真实高度,包含溢出的内容;

    获取元素的外链样式:

    window.getComputedStyle(ele,null)第二个参数是元素伪类(ie6-8不兼容)

    el.currentStyle.attr (ie6-8)

    //获取浏览器类型

    window.navigator.userAgent

    展开全文
  • 随机更改外联样式表文件代码: function kkk(){ var css=document.getElementById("css01"); var kk=Math.random(); if (kk>0.7) { css.setAttribute("href","css/css_Change1.css"); }...
  • 添加CSS的方式有行内式、嵌入式、外链式、导入式 a)动态引入样式表文件: 代码如下: function loadLink(url){ var link = document.createElement(“link”); link.type = “text/css”; link.rel = “stylesheet”;...
  • 一般给元素设置行内样式,如<div id="div1" style="width:500px;">...但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了。 在标准浏览器中可以通过window.getComputedStyll...
  • 1.行内式行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。2.内嵌式..// 此处添加css代码缺点是对于一个包含很多网页的网站,在每个网页中使用嵌入式,进行修改样式时非常麻烦。...
  • 由于内联样式和外链样式的编写方式是一样的,本章的例子是把样式编写在外链样式的文件中。 一、编写Hype元素样式 虽然Hype添加了CSS外链样式,但是style.css文件是空白的,没有指向元素的样式语句。 为了避免样式...
  • 【行间样式获取】 <div id='div1' style="backgroud:red">测试</div>  <script>  var odiv=document.getElementById('div1'); //先获取到要获取样式的元素标签,也就是获取到div1  ...
  • 行间样式、内部样式和外链样式 写在style属性中的样式叫行间样式 写在style标记的样式叫内部样式 写在css文件里的样式叫外链样式,需要link链入html文件 内部样式和外链样式需要用选择器找到要...
  • CSS外链式与内联式的区别是什么

    千次阅读 2021-01-30 18:53:38
    区别:CSS外链式是将css代码单独写一个以“.css”...内联式的权重高于内联式。本教程操作环境:windows7系统、css3&&...(学习视频分享:css视频教程)CSS外链式--外链样式外链样式表,是单独写一个以css为扩展...
  • var box = document.getElementById("box... //访问元素样式2,对外链样式表进行操作  document.styleSheets //得到的是样式表集合styleSheetList  var sheet = document.styleSheets[0];//取得要修改的第一个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,508
精华内容 7,803
关键字:

外链样式