精华内容
下载资源
问答
  • dom怎么元素添加类样式When you have a DOM element reference you can add a new class to it by using the add method: 当您拥有DOM元素引用时,可以使用add方法向其添加新: element.classList.add('...

    dom怎么给元素添加类样式

    When you have a DOM element reference you can add a new class to it by using the add method:

    当您拥有DOM元素引用时,可以使用add方法向其添加新类:

    element.classList.add('myclass')

    You can remove a class using the remove method:

    您可以使用remove方法删除一个类:

    element.classList.remove('myclass')

    Implementation detail: classList is not an array, but rather it is a collection of type DOMTokenList.

    实现细节: classList不是数组,而是DOMTokenList类型的集合

    You can’t directly edit classList because it’s a read-only property. You can however use its methods to change the element classes.

    您不能直接编辑classList因为它是只读属性。 但是,您可以使用其方法来更改元素类。

    翻译自: https://flaviocopes.com/add-class-to-dom-element/

    dom怎么给元素添加类样式

    展开全文
  • Vue获取DOM元素样式样式更改

    千次阅读 2019-04-17 09:26:14
    Vue获取DOM元素样式样式更改 在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...

    Vue获取DOM元素样式和样式更改

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,
    这时候可以在 mounted 里用 $refs 来获取样式,并进行更改:

    <template>
      <div style="display: block;" ref="abc">
        <!-- ... -->
      </div>
    </template>
    <script>
      export default {
        mounted () {
          console.log(this.$refs.abc.style.cssText)
        }
      }
    </script>
    

    结果是 display: block;

    如果我们给一个div设定全屏背景图,就需要获取屏幕高度进行赋值:

    <template>
      <div ref="nana">
        <!-- ... -->
      </div>
    </template>
    
    <script>
    export default {
      mounted () {
       let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
       let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    
        this.$refs.nana.style.height = h +'px';
    
      }
    
    }
    
    操作元素的多个属性    this.$refs.nana.style= 'background-color:#1F2429;width:140px';
    
    </script>
    
    展开全文
  • 先看两例子: html: 啦啦啦 css: .test{ width: 100px; height: 100px; background: #B6BAC4; } .test1{ border: 1px solid; width: 200px; border-radius: 4px; } .test2{ margin: 0 auto; } ....

    先看两个例子:

    html:

    <div class="test" id="test">
     啦啦啦
    </div>

    css:

    .test{
      width: 100px;
      height: 100px;
      background: #B6BAC4;
    }
    .test1{
      border: 1px solid;
      width: 200px;
      border-radius: 4px;
    }
    .test2{
      margin: 0 auto;
    }
    .test3{
      font-size: 50px;
    }

    js:

    // 覆盖原来的样式
    document.getElementById("test").setAttribute("class","test1");
    var dom=document.getElementsByClassName("test")[0].setAttribute("class","test1");
    // 追加样式不覆盖原来的样式
    document.getElementById("test").classList.add("test1");
    document.getElementById("test").classList.add("test1","test2","test3");
    var dom=document.getElementsByClassName("test")[0].classList.add("test1");
    var dom=document.getElementsByClassName("test")[0].classList.add("test1","test2","test3");

    效果:

    覆盖

    不覆盖:

    追加多个样式:


    注意所有的都必须要在DOM获取到的前提下用

    其次:再用类名获取DOM的时候会报错:

    常见报错——Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function

    原因:document.getElementsByClassName(...)捕捉到的是该类名元素的数组
    正确的访问方式应该是:
    document.getElementsByClassName(...)[0].addEventListener...
    使用遍历为每个class添加监听:
    var classObj = document.getElementsByClassName(...);
    for(i=0;i<classObj.length;i++){
    classObj[i].addEventListener...
    }
    所以在后面加上数组的下标确定是该类名的哪一个类名下追加或者替换
    移出一个
    dom.classList.remove("className1");
      

    移除多个类:

    dom.classList.remove("className1", "className2", "className3", ....., "classNameN");
    
    

    检查是否含有某个类

    dom.classList.contains('className'); //return true or false


    一个综合应用就是给一组类名相同的DOM追加一个或多个相同的样式
    html:
    <ul>
        <li class="test" id="1" >111</li>
        <li class="test" id="2" >111</li>
        <li class="test" id="3" >111</li>
        <li class="test" id="4" >111</li>
    </ul>

    css:
    .test{
      width: 100px;
      height: 100px;
      background: #B6BAC4;
    }
    .test1{
      border: 1px solid;
      width: 200px;
      border-radius: 4px;
    }
    .test2{
      margin: 0 auto;
    }
    .test3{
      font-size: 50px;
    }

    js:
     var dom=document.getElementsByClassName("test");
    for(var i=0;i<dom.length;i++){
        dom[i].classList.add("test1");
    }

    效果:



    展开全文
  • 但是直接添加样式无法生效,用JS方法直接获取DOM也获取不到。 网上查了一下,shadow-root包裹下的对象,不在全局的DOM树中,因此getElementById 等方法,获取不到包裹中的对象。 比较官方的解释是: Shadow DOM 这款...

    项目中在dom结构里遇到了shadow-DOM(open),如下
    在这里插入图片描述

    但是直接添加样式无法生效,用JS方法直接获取DOM也获取不到。

    网上查了一下,shadow-root包裹下的对象,不在全局的DOM树中,因此getElementById 等方法,获取不到包裹中的对象。

    比较官方的解释是:
    Shadow DOM 这款工具旨在构建基于组件的应用。因此,可为网络开发中的常见问题提供解决方案:

    • 隔离 DOM:组件的 DOM 是独立的(例如,document.querySelector() 不会返回组件 shadow DOM 中的节点)。
    • 作用域 CSS:shadow DOM 内部定义的 CSS 在其作用域内。样式规则不会泄漏,页面样式也不会渗入。
    • 组合:为组件设计一个声明性、基于标记的 API。
    • 简化 CSS - 作用域 DOM 意味着您可以使用简单的 CSS 选择器,更通用的 id/类名称,而无需担心命名冲突。
    • 效率 - 将应用看成是多个 DOM 块,而不是一个大的(全局性)页面。

    Shadow DOM 与普通 DOM 相同,但有两点区别:

    1. 创建/使用的方式;
    2. 与页面其他部分有关的行为方式。

    通常,您创建 DOM 节点并将其附加至其他元素作为子项。 借助于 shadow DOM,您可以创建作用域 DOM 树,该 DOM 树附加至该元素上,但与其自身真正的子项分离开来。这一作用域子树称为影子树。被附着的元素称为影子宿主。

    反正简单的意思就是可以用来独立建立一块渲染块,不受外层样式的影响,内层的样式也不影响外层的显示。

    总结一下,可以用以下方法给shadow-root里的元素添加样式

    1. 先获取shadow-root的父级节点,然后用shadowRoot取得这个父级节点的shadow块,然后就可以进行操作了
    document.querySelector('.contant').shadowRoot.querySelector('.vscroll-nav').innerHTML
    

    这个方法在我项目中好像不太行,能获取到shadow块,但是获取不到shadow块下面的子元素

     console.log(document.querySelector('.contant').shadowRoot)  
     console.log(document.querySelector('.contant').shadowRoot.querySelector('.vscroll-nav'));
    

    在这里插入图片描述

    1. 在shadow块下面创建style标签,在里面添加样式(这个可以)
        let gtx = document.querySelector(".contant");
        let style = document.createElement("style");
        style.innerHTML =
          ".li-frame { display: flex;justify-content: center;align-items: center;}";
        gtx.shadowRoot.appendChild(style);
    

    在这里插入图片描述
    相关资料: Shadow DOM v1:独立的网络组件

    展开全文
  • dom修改css样式

    千次阅读 2018-02-08 15:32:12
    如果文档内容需要一个CMS来处理 文档内容的个别部分添加class属性或者其他样式的做法有时是不被允许的 font-size属性要用元素.style.fontSize来检索 考虑纯粹用css还是用DOM设置样式 需要考虑这些问题: 1最...
  • Shadow DOM样式ShadowRoot

    千次阅读 2019-04-22 17:21:06
    我们已经可以使用原生的操作DOM的方式和使用模板的...样式封装 前面曾说过,正常DOM样式是不会影响到Shadow DOM中的样式的。例如: <style type="text/css"> .red { color: red; } </style>...
  • 写在前面:DOM(Document Object Model ,文档对象模型)种独立于语言,用于操作xml,html文档的应用编程接口。对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口。对于...
  • DOM 操作表格及样式

    千次阅读 2015-07-29 09:36:12
    学习要点: 1.操作表格 2.操作样式 DOM 在操作生成 HTML 上,还是比较简明的。不过,由于浏览器总是存在兼容和陷阱,...中结构最为复杂的一个,我们可以通过 DOM 来创建生成它,或 者 HTML DOM 来操作它。(PS:H
  • 请看代码,为什么静态是红色,动态是黑色,怎样使动态也能应用css? .texta { color:#ff0000; } ... window.onload=function () { var bodydiv=document.getElementById("bodydiv");...</html>
  • jquery_dom 样式获取

    千次阅读 2013-04-17 19:58:54
    attr()获取和设置样式 addclass()追加样式 removeclass()移出样式 toggle()切换样式   .high{font-style:italic; font-weight:bold;} .hide{  display:none;} //样式的操作 $(function(){  //...
  • 具体情况:使用refs获取到dom,然后使用innerHTML来更改内容,内容为 html,其样式早已在style中写好,并且使用scoped限制作用域;但是在更改后的内容的样式却并未生效; 具体代码:  HTML:  <d...
  • 作者:郑名方 本次任务完成时间:2019...一、 下面我们来看一个例子,通过DOM 内部插入append()与appendTo()的方法,还可以从jQuery提供的方法是prepend()与prependTo() 二、 因为知道append()$("#qwerty"...
  • React添加元素增加样式

    万次阅读 2016-09-26 22:16:55
    React添加元素增加样式种方法: React .lala{ color:red; font-size: 40px; } var Hello=React.createClass({ render
  • JavaScript学习9:DOM操作表格及样式

    千次阅读 2015-05-31 21:27:45
    DOM在操作生成HTML上,还是比较简单明了的。不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了。那本文今天就来了解一下DOM如何操作表格和... 下面我们就使用DOM来创建一个表格: window.onlo
  • 原生JS给DOM元素增加修改和删除class

    万次阅读 2019-03-11 11:34:58
    之前一直使用jq,处理页面结构变化都很方便,不过在某些不实用jq的项目里,还是必须得知道如何使用原生JS去处理页面中简单的一些样式变化。这里介绍js针对css方面的一些基本操作。 &lt;html lang="en"...
  • DOM

    千次阅读 多人点赞 2020-12-22 22:54:28
    W3C文档对象模型(DOM)是一个使程序和脚本能够动态地访问和更新文档的内容、结构以及样式,并独立于平台和语言的接口。W3C DOM提供了一套用于HTML和XML文档的标准对象,以及访问这些文档的标准接口。 文档对象模型...
  • vue获取dom元素与修改样式详解

    千次阅读 2019-10-30 16:34:45
    vue中如何获取dom元素呢? 步骤详解 在标签上加上ref属性 如 : 在js中通过refs便可以获取dom如:...修改对应的样式名 如:this.$refs.refDemo.style.backgroundColor="#108ee9" 还不会? 请看代码例子 <tem...
  • 在编写js的代码过程中难免会遇到一些数据改变后或者场景要根据条件改变页面上元素的样式 方法object.style.属性名例如: var box=document.getElementById('box1'); box.onclick=function(){ box.style.width=...
  • DOM设置元素的样式 1、通过style属性设置修改样式 【注!】此方式是直接设置标签的style属性,设置完后,优先级最高 <div id="d1"> helloworld </div> <script type="text/javascript"> ...
  • 开发工具与关键技术:Visual Studio ASP.NET MVC 作者:刘剑鸿 ...在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性获取的不是class名称...
  • 怎样创建一个新的element var p = document.createElement("p") p.id="dwdw"; p.class="dwdw" Element的之间的关系参考node之间的关系 parentElement() children() ...
  • DOM系列:动态添加CSS样式规则

    千次阅读 2018-06-26 22:14:34
    在上一节中学习了如何通过JavaScript来修改CSS样式。简单地说:查询CSS样式(即计算样式),设置单个样式(设置的是行内样式),设置多个样式(通过来设置样式)。...
  • vue中给一个元素添加style样式

    千次阅读 2019-09-20 17:28:47
    使用 $el.style.top this.HeaderWarrp = this.$refs.headerwarrp.clientHeight this.$refs.list.$el.style.top = `${this.HeaderWarrp}px`
  • 首选,回顾一下CSS定义样式的三种方式:链接外部样式、嵌入样式(放在head元素中)和内联样式(行内样式)。想要让样式生效,有如下方式: 通过CSS选择器来进行大规模选取,但通常会用到ID属性和class属性来指定范围...
  • 改变dom节点样式另一种方式是利用js动态创建一个style标签,再填入css属性,再添加到页面  hello world function addStyleNode( str){ var styleNode=document.createElement("style"); styleNode....
  • 种方式:(childNodes) <!doctype html> <html> <head> <meta charset="utf-8"> <title>DOM</title> </head> <script> window.onload=function(){ var ...
  • 原文地址:Encapsulating Style and Structure with Shadow DOM 原文作者:Caleb Williams 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:Xuyuey 校对者:邪无神、Ziyin Feng 该系列由 5 ...
  • 但是发现mui框架的文档介绍里并没有关于类似jquery那种定位dom节点,选择器和修改属性和样式的Api。我们知道,原生js代码是在各种设备和浏览器中兼容性最好的,于是这两天研究了javascript操作dom节点属...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,108
精华内容 21,243
关键字:

给一个dom增加一个样式类