为什么div标签不能通过它的className改变css？

div标签不能通过它的className改变css的原因是因为className只是div标签的一个属性，它用于指定div标签的类名，而不是用于改变css样式。css样式是通过样式表来定义和控制的，可以通过选择器来选择需要改变样式的元素，然后通过样式规则来改变元素的样式。

要改变div标签的样式，可以通过以下几种方式：

使用内联样式：在div标签的style属性中直接写入css样式，例如：<div style="color: red;">Hello World</div>。
使用外部样式表：将css样式写入一个独立的css文件中，然后在html文件中通过link标签引入该样式表，例如：<link rel="stylesheet" href="styles.css">。
使用内部样式表：在html文件的head标签中使用style标签定义css样式，例如：

<head>
  <style>
    .myDiv {
      color: red;
    }
  </style>
</head>
<body>
  <div class="myDiv">Hello World</div>
</body>

在腾讯云的产品中，可以使用云服务器（CVM）来搭建网站和应用程序，使用云数据库（CDB）来存储数据，使用云存储（COS）来存储文件和对象，使用云函数（SCF）来运行代码，使用云原生应用引擎（TKE）来部署和管理容器化应用等。具体产品介绍和链接地址可以参考腾讯云官方网站。

，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写； JSX中的标签可以使单标签,也可以是双标签如果是单标签,必须以/>结尾 JSX 注释都要用花括号{}包起来 {...> ) 绑定class 在jsx中，class属性需要指定为className，因为class在JavaScript中是保留字段 const hasCss = true; const h1Css...'css' : 'noCss', ] let jsx = ( div> className='flex'>hello world className...JSX -> VR DOM -> DOM 为什么要用VR DOM 很难跟踪状态发生的改变：原有的开发模式，我们很难跟踪到状态发生的改变，不方便针对我们应用程序进行调试；操作真实DOM性能较低：...这才是为什么要有 Virtual DOM：它保证了：不管你的数据变化多少，每次重绘的性能都可以接受；你依然可以用类似 innerHTML 的思路去写你的应用。

8262 0

详析设置样式的方法

本文内容概要： 1 使用className属性设置标签的样式 2 使用style对象设置标签的样式 3 使用cssText属性设置标签的样式 4 课程小结 5 课后作业 1 使用className属性设置标签的样式...那我们完全可以通过JS给标签动态的添加类名，以达到动态改变标签的样式。具体的操作看下面的实例。实例： <!...代码分析：使用id名获取网页的标签，然后再使用className属性给标签添加类名wrap；因为class是JS的保留字，不符合命名规范，所以类名属性是className而不是class；到目前为止相信大家已经掌握了使用...className属性给标签添加类名。...那我们还是老样子把它封装成一个功能函数 div id="wrapEle" class="wrap">HTML5学堂 - 陈能堡div> <script type="text/javascript"

1.4K7 0

技术 | Hybrid载体的变化（三）

，当然一句document.xxx操作DOM的方式在只有改变一个值的情况下的意义，这样的类比以前讨论的很多，这样的比较毫无意义，但是为什么“它”敢说它比操作DOM要快？...$el.html('div>div>') 这一部分传统意义上是可以交给框架去处理的，在“React”出现之前，“Angularjs”接替了一部分这些工作，那我们为什么要着重去说“React”呢？..."className":"xxx", "tagName":"div" } } ] } 对于Web的意义它描述的是一组DOM节点以及节点上应该有的属性...://github.com/reworkcss/css）将css转换成了JSON对象形式，有了这些，剩下需要做的就是通信了，看来我们又可以回到前面两章中提及了JavaScriptCore，它来沟通Native...当你在描述： div className="icepy">div> 你得到的却是： React.createElement('div',{ className: 'icepy'}) 甚至将你的CSS

4874 0

81.精读《使用 CSS 属性选择器》

2 概要 Css Module 与 Css-in-js 大部分场景使用 className 作为选择器，那么本文以选择器为重点，看看选择器有哪些实用的用法。...： div[title*="dna"] 真的很像正则，你可以用 i 标识匹配时大小写不敏感： div[title*="dna" i] 如果你想找到一个 a 标签，拥有 title 属性并且 className...比如根据输入框类型设置样式 input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; } 改变下载标签的...也许今天的 div 选择器，明天因为语义化改造就换成了 article 标签。...className 都唯一，做到标签粒度的隔离。

6892 0

为什么我的样式不起作用？

还有一个Child的子组件，红底黑字。那么实际渲染出的样式是什么样子的呢。如下图: ? 实际看到的效果确实蓝底白字与红底白字，为什么与写的代码有出入呢。...究其原因为什么子组件的字体颜色不是黑色确是白色? ?...但实际上，CSS选择器读取顺序是从右到左如果是这样的规定的话，还是上面的例子就变成了，先找到所有的span标签，然后找span标签是h3的，然后再延着h3往上寻找，这时候发现一个选择器的类名为.nav.../Child.less' div className={styles.child}> div className={styles.component}> css modules...最后文章首发于：为什么我的样式不起作用？参考：浏览器渲染原理与过程参考：CSS选择器从右向左的匹配规则 DEMO地址

4.2K2 0

一文带你梳理React面试题（2023年版本）

用于解决外部数据撕裂问题useInsertionEffect这个hooks只建议在css in js库中使用，这个hooks执行时机在DOM生成之后，useLayoutEffect执行之前，它的工作原理大致与...的语法糖，使用jsx等价于React.createElementjsx是js的语法扩展，允许在html中写JS；JS是原生写法，需要通过script标签引入为什么在文件中没有使用react，也要在文件顶部...如果组件首字母为小写，它会被当成字符串进行传递，在创建虚拟DOM的时候，就会把它当成一个html标签，而html没有app这个标签，就会报错。...thisreact组件会被编译为React.createElement,在createElement中，它的this丢失了，并不是由组件实例调用的，因此需要手动绑定this为什么不能通过return false...Store 一个全局状态管理对象Reducer 一个纯函数，根据旧state和props更新新stateAction 改变状态的唯一方式是dispatch action八、React-Router工作原理为什么需要前端路由早期

4.3K12 2

「译」如何编写 React 应用程序的样式

但更重要的是，从现在起一个月或一年后，当我必须对项目进行快速更改时，我将能够理解它们。进行 CSS 更改我们编写CSS的方式和我们改变它的方式有很大不同。...当我们以经典的方式编写CSS时，我们会想到用类描述内容的最佳方式。当我们需要改变一些东西时，如果它不再足够好，我们很少考虑更新类设计。...为了理解为什么我如此欣赏这种方法，我们需要回顾一下在基于组件的库存在之前CSS是如何编写的。...但这仍然留下了一些问题 - 基于标签选择带有CSS的元素是一场噩梦，并且不可能弄清楚长HTML文件中每个元素的含义。因此，classes是我们的解决方案。...当每个标签都附加了一个名称时，浏览标记变得容易得多，你可以弄清楚它的用途。但是由于太长的原因，我们在这里无法描述，我们现在使用的是组件，而不是页面。

1011 0

【React基础-4】组件 & Props

那既然组件就是一段HTML代码，为什么还要搞出来组件这个名称呢，我们如果描述指定的HTML片段代码的时候直接就说是id为什么什么的一段div包裹的HTML代码就行了呗。...，最后将其返回并渲染到页面上，然后我们看到的效果就是这个按钮的背景色是随着用户不同的操作事件来动态改变的。...上述例子中的按钮就是一个组件，它接收表示颜色的变量，将它赋值给控制按钮背景色的css属性后，将一个含有最新css属性值的按钮元素返回，然后渲染到页面，就是这样一个流程。...(props.date)}div> div> ); } 在上述代码中我们将表示用户头像的img标签进行了组件提取，形成了一个新的组件Avatar，而且Avatar组件的props...组件可以随着用户操作、网络请求等事件动态的改变页面的输出内容。

5861 0

JavaScript之DOM

能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应...属性获取 document.getElementsByTagName 根据标签名获取标签合集间接查找　　　　找到一个元素后就可以通过元素.XX的形式间接查找跟它相关的元素，　　　　...d1Ele.className //查看d1Ele有哪些类 d1Ele.classList.add('clear-fixed')　　//为它添加一个名为clear-fixed的类名 d1Ele.classList.remove...指定 CSS操作 d1Ele.style.background='red' //改变指定元素的背景颜色 d1Ele.style.height='100px' //改变指定元素的宽度...应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。

1.5K5 0

京东前端二面高频react面试题

它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如、、div> 等。...此文件能使应用非常可靠，并能够提高其性能jsx的语法规则定义虚拟DOM的时候不需要写引号标签中要混入js表达式的时候需要用 {}在jsx中写标签的类名的时候用className 代替class内联样式的时候...}>调用父的方法 div> div> ); }}export default Child;css：.dialog-con{ position...refs操作DOM，为什么操作DOM?....children])第一个参数是必填，传入的是似HTML标签名称，eg: ul, li第二个参数是选填，表示的是属性，eg: className第三个参数是选填, 子节点，eg: 要显示的文本内容//

1.6K2 0

手把手带你10分钟手撸一个简易的Markdown编辑器

className="edit" /> div className="show" /> div> ) } css样式我就不一一列举了...// 将html字符串解析成真正的html标签 /> div> ) } 对于将 html字符串转化为真正的html标签的操作，我们借助了React...其实是没问题的，被解析好的 html字符串每个标签都被附带上了特定的类名，只是现在我们引入任何的样式文件，例如下图我们可以打印解析出来的html字符串看看是什么样的大标题h1...，当我手动滚动完以后停止了任何操作，但是两个区域仍然在不停的滚动，这是为什么呢？...会同步渲染展示区的内容 value={value} /> div className=

1.5K2 0

手把手带你10分钟手撸一个简易的Markdown编辑器

className="edit" /> div className="show" /> div> ) } css样式我就不一一列举了...// 将html字符串解析成真正的html标签 /> div> ) } 对于将 html字符串转化为真正的html标签的操作，我们借助了React...其实是没问题的，被解析好的 html字符串每个标签都被附带上了特定的类名，只是现在我们引入任何的样式文件，例如下图 ?...官方文档 (opens new window)，这个库能帮你做的就是检测代码块标签元素，并为其加上特定的类名。...同步滚动的效果实现了，但能很明显得看到，当我手动滚动完以后停止了任何操作，但是两个区域仍然在不停的滚动，这是为什么呢？

2.1K1 0

使用 tabindex 配合 focus-within 巧妙实现父选择器

它表示一个元素获得焦点，或，该元素的后代元素获得焦点。划重点，它或它的后代获得焦点。...也就是说，一个单纯的 div 标签，他是没有 focus 事件的，然而，我们给它加上一个 tabindex 属性，这个时候他就会获得类似 input 框一样的表现，拥有了 focus 事件，再配合 :focus-within...-- 拥有 focus 事件的 .g-children 元素 --> div class="g-children" tabindex="-1">Clickdiv> div> 这里为什么是... tabindex="-1" 呢，tabindex 负值表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素。...这样，配合 :focus-within，就能做到当点击子元素的时候，去改变父元素的样式了。

1.1K1 0

开发一个在线 Web 代码编辑器，如何？今天来教你！

className="code-mirror-wrapper" 这个类名不是我们自己设置的样式。它由我们在上面导入的 CodeMirror 的 CSS 文件提供。...div> ) ... 在上面的代码中，我们使用 label 标签向我们的下拉列表添加标签，然后添加 select 标签来创建我们的下拉列表。...你可能会问：为什么我们需要使用 setTimeout() ？如果我们在没有它的情况下编写它，那么每次在编辑器中按下一个键，我们的 iframe 都会更新，这通常不利于性能。...我们还获取了包含用户在 CSS 编辑器中输入的样式的 css 状态，并在样式标签之间传递了它。...最后，我们获取了包含用户在 JavaScript 编辑器中键入的 JavaScript 代码的 js 状态，并在脚本标签之间传递了它。

12.3K3 0

【实战】快来和我一起开发一个在线 Web 代码编辑器

8112 0

React 实现一个markdown

return ( div className={style.markdown}> div className={style.header}> {/* onChange...className={style.input} size="middle" // 改变提交参数的title onChange={e => setSubmitParams...'; // 引入github风格的代码高亮样式 // 这个dark风格跟我的有些样式冲突所以没使用 // import 'highlight.js/styles/dark.css' 实现效果如下...handleEditorChange 这是Markdown内容改变触发的函数，html和text分别是Markdown对应的标签和md格式。...const reg = /]+>/g; // 1、全局匹配g肯定忘记写 2、标签中不能包含标签实现过滤HTML标签 const text2 = html.replace

9802 0

【web前端阶段二】CSS巩固学习（持续更新）

---- 优先级：行内样式>内部样式>外部样式>导入样式 ---- css加载方式link和@import的区别，为什么不推荐使用@import?...使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为dom操作元素的样式时，用@import方式的样式也许还未加载完成。...，其选择器排序：ID选择器>类选择器>标签选择器（范围越小越优先）外部样式表的ID选择器>内部样式表的标签选择器 7. div+css布局内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候...，效果最明显 div：可定义文档中的分区或节可以把文档分割为独立的、不同的部分。...这意味着它的内容自动地开始一个新行通常与css进行配合，会有更加强的表现形式布局实例时需要用到的css属性 width:数值 height:数值 background-color:颜色 float:

6584 0

react-router-dom 6.x 版本让我🐓 🐝 了

---- 这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战」前言 ✋ 先，说一下我为什么发这么一篇文章。一个月前刚用过react的路由插件。当时用了之后也没有什么报错。...后来才发现是更新了版本，好多用法都改变了。所以想写篇文章梳理一下，同时也让能看到这篇文章的们，少百度一些报错。.../App.css'; import {BrowserRouter, Route, Routes, Switch} from 'react-router-dom'; import Home from '..../pages/navigator' function App() { return ( div className="App"> ...因为在v6中，component属性被替换成了element,并且需要传带标签的组件而不只是组件名称 } /> ❌ 3.

6122 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

为什么div标签不能通过它的className改变css？

相关·内容

One DIV：纯 CSS 和一个 DIV 标签创建的图标合集

DIV+CSS中标签dl dt dd常用的用法

Vue 2x 中使用 render 和 jsx 的最佳实践（2）

详析设置样式的方法

技术 | Hybrid载体的变化（三）

81.精读《使用 CSS 属性选择器》

为什么我的样式不起作用？

一文带你梳理React面试题（2023年版本）

「译」如何编写 React 应用程序的样式

【React基础-4】组件 & Props

JavaScript之DOM

京东前端二面高频react面试题

手把手带你10分钟手撸一个简易的Markdown编辑器

手把手带你10分钟手撸一个简易的Markdown编辑器

使用 tabindex 配合 focus-within 巧妙实现父选择器

开发一个在线 Web 代码编辑器，如何？今天来教你！

【实战】快来和我一起开发一个在线 Web 代码编辑器

React 实现一个markdown

【web前端阶段二】CSS巩固学习（持续更新）

react-router-dom 6.x 版本让我🐓 🐝 了

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐