stylesheet 相关问题

不要使用此标签。将[css]用于CSS相关问题，将[xslt]用于XSLT相关问题。

QWidget setStyleSheet 支持哪种 CSS 标准？

据我了解，QtWidgets 可以使用 setStyleSheet 方法通过 CSS 设置样式。请参阅参考：QtWidgets styleSheet 问题是我不知道它是否支持 CSS3 或者从哪个开始

qt css stylesheet qwidget

回答 1 投票 0

使用javascript更改CSS样式表

我有以下内容： .el {颜色：蓝色；} 布拉布拉布拉布拉123 我需要使用 JavaScript 来...

javascript css stylesheet

回答 3 投票 0

如何在 JavaScript 中获取 HTML 元素的样式值？

我正在寻找一种方法，从具有由样式标签设置的样式的元素中检索样式。 #box {宽度：100px;} 在身体里 &... 我正在寻找一种方法，从具有通过样式标签设置的样式的元素中检索样式。 <style> #box {width: 100px;} </style> 在体内 <div id="box"></div> 我正在寻找不使用库的直接 JavaScript。我尝试了以下操作，但不断收到空白： alert (document.getElementById("box").style.width); alert (document.getElementById("box").style.getPropertyValue("width")); 我注意到，如果我使用 javascript 设置了样式，则只能使用上面的内容，但无法使用样式标签。 element.style属性让您只知道在该元素中定义为inline的CSS属性（以编程方式，或在元素的样式属性中定义），您应该获得计算的样式。跨浏览器的方式没那么容易做到，IE 有自己的方式，通过 element.currentStyle 属性，而 DOM Level 2 standard 方式，其他浏览器实现是通过 document.defaultView.getComputedStyle方法。这两种方式有区别，例如 IE element.currentStyle 属性希望您访问由两个或多个 camelCase 单词组成的 CCS 属性名称（例如 maxHeight、fontSize、backgroundColor、等），标准方法期望具有用破折号分隔的单词的属性（例如 max-height、font-size、background-color 等）。此外，IE element.currentStyle 将返回指定单位的所有尺寸（例如 12pt、50%、5em），标准方法将始终以像素为单位计算实际尺寸。我前段时间做了一个跨浏览器功能，可以让你以跨浏览器的方式获取计算样式： function getStyle(el, styleProp) { var value, defaultView = (el.ownerDocument || document).defaultView; // W3C standard way: if (defaultView && defaultView.getComputedStyle) { // sanitize property name to css notation // (hypen separated words eg. font-Size) styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase(); return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp); } else if (el.currentStyle) { // IE // sanitize property name to camelCase styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) { return letter.toUpperCase(); }); value = el.currentStyle[styleProp]; // convert other units to pixels on IE if (/^\d+(em|pt|%|ex)?$/i.test(value)) { return (function(value) { var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left; el.runtimeStyle.left = el.currentStyle.left; el.style.left = value || 0; value = el.style.pixelLeft + "px"; el.style.left = oldLeft; el.runtimeStyle.left = oldRsLeft; return value; })(value); } return value; } } 上述函数在某些情况下并不完美，例如对于颜色，标准方法将以 rgb(...) 表示法返回颜色，在 IE 上它们将按定义返回它们。我目前正在撰写该主题的一篇文章，您可以在这里关注我对此功能所做的更改。我相信你现在可以使用 Window.getCompulatedStyle() var style = window.getComputedStyle(element[, pseudoElt]); 获取元素宽度的示例： window.getComputedStyle(document.querySelector('#mainbar')).width 在 jQuery 中，你可以做 alert($("#theid").css("width"))。 -- 如果您还没有看过 jQuery，我强烈推荐它；它使许多简单的 javascript 任务变得毫不费力。更新郑重声明，这篇文章已经有 5 年历史了。 Web 已经发展、进步等等。有很多方法可以使用普通的旧 Javascript 来做到这一点，这是更好的。使用getComputedStyle功能，计算样式包含设置到元素的所有CSS属性。即使不为元素设置属性。您仍然会在计算样式中找到该属性。示例： <style> #Body_element { color: green; } </style> <body id="Body_element"> <script> alert(getComputedStyle(Body_element).color) </script> </body> 如果您想从同一元素获取多个样式规则，这是一个辅助函数。您将所需的元素和样式作为参数传递给它，它将返回它们的值 <style> #Body_element { color: green; } </style> <body id="Body_element"> <script> alert(getComputedStyle(Body_element).color) </script> </body> 现在，您可以像这样使用此功能： const convertRestArgsIntoStylesArr = ([...args]) => { return args.slice(1); } const getStyles = function () { const args = [...arguments]; const [element] = args; let stylesProps = [...args][1] instanceof Array ? args[1] : convertRestArgsIntoStylesArr(args); const styles = window.getComputedStyle(element); const stylesObj = stylesProps.reduce((acc, v) => { acc[v] = styles.getPropertyValue(v); return acc; }, {}); return stylesObj; }; 或 const styles = getStyles(document.body, "height", "width");

javascript html css stylesheet

回答 5 投票 0

如何在react-native中重置边距？

仍在习惯反应原生样式。我注意到重置边距的工作方式与普通网络略有不同。对于上下文，我正在使用react-native for web。如果您执行以下操作仍在习惯反应原生样式。我注意到重置边距的工作方式与普通网络略有不同。对于上下文，我正在使用react-native for web。如果您执行以下操作 <View style=[{ verticalMargin: 10 }, { margin: 0 }] /> 我的期望是视图将所有边距重置为 0，但实际上垂直边距没有重置，顶部和底部边距保持 10 作为其值。根据 docs，这对我来说没有意义数组中最后一个样式优先是因为verticalMargin比margin更具体吗？这是我们在使用可重用样式或组件时在 React Native 开发中面临的常见问题。要解决此边距问题，您可能需要从视图或任何其他组件的每一侧重置边距值。例如。 <View style={ [ { marginVertical: 10, marginHorizontal: 20 }, { marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0, }, ] } />

css react-native stylesheet react-native-stylesheet react-native-for-web

回答 1 投票 0

CSS中当子元素获得焦点时如何更改父元素样式

我想在子元素接收焦点时更改父样式。不幸的是，下面的代码根本不起作用。请帮我看看该怎么做？＃电子邮件 { 奥帕奇... 我想在子 <div> 元素接收焦点时更改父 <input> 样式。不幸的是，下面的代码根本不起作用。请帮我看看该怎么做？ #email { opacity: 0.3; } #exampleInputEmail1:focus < #email { background: #f90442; } <div class="form-group form-group-lg" id="email" tabindex="0"> <label>Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> 不幸的是，CSS 中没有父选择器，甚至在 CSS3 中也没有。您必须使用解决方法 – 即某种 JavaScript。如何使用 javascript 来解决这个问题必须根据具体情况来决定。可以说，最简单、最“易于访问”的解决方案可能是使用 jQuery，并且有很多选择。例如，您可以使用 :has() 选择器定位父包装器： $(".form-group").has(":focus") 这将针对任何具有 class="form-group [...]" 的元素，该元素的子代中具有焦点的元素（不仅仅是作为直接子元素）。或者您可以使用.closest()功能： $(":focus").closest(".form-group") 与类似的 .parents() 函数不同，一旦选择器匹配，.closest() 就会停止向上遍历 DOM 树。这可能使 .closest() 成为这两者中更有效的选择。上面的两个例子对于 DOM 结构来说都是宽松的，并且如果它发生变化也不太可能破坏。但是，如果包装元素always是<input>的直接父级，则可以使用.parent()函数（带有可选选择器）： // Option 1: Targets the immediate parent $("input:focus").parent() // Option 2: Targets the immediate parent, but only if it's a div $("input:focus").parent("div") 这 4 个选项的示例实现，通过切换包装器上的 .infocus 类（也可用作 jsfiddle）来工作： // Adds or removes a focus class. function updateFocus(e) { // Log the event to view details about it // console.log(e); // The "has focus" class name var focusClass = "infocus"; // The wrapper element selector var wrapperSel = ".form-group"; //*=========================================================== // Option 1: has(":focus") // - needs only the wrapper selector // =========================================================== var wrapper = $(wrapperSel); // Remove the class on all //wrapper.each(function() { $(this).removeClass(focusClass);}); wrapper.removeClass(focusClass); // Add class only to the one whose descendant has focus wrapper.has(":focus").addClass(focusClass); //*/ /* =========================================================== // Option 2: closest() // - needs the event and the wrapper selector // =========================================================== if (e.type === "focus") { $(e.target).closest(wrapperSel).addClass(focusClass); } else if (e.type === "blur") { $(e.target).closest(wrapperSel).removeClass(focusClass); } //*/ /* =========================================================== // Option 3: parents() // - needs the event and the wrapper selector // =========================================================== if (e.type === "focus") { $(e.target).parents(wrapperSel).addClass(focusClass); } else if (e.type === "blur") { $(e.target).parents(wrapperSel).removeClass(focusClass); } //*/ /* =========================================================== // Option 4: parent() // - needs only the event (the wrapper selector is optional) // =========================================================== if (e.type === "focus") { $(e.target).parent().addClass(focusClass); } else if (e.type === "blur") { $(e.target).parent().removeClass(focusClass); } //*/ } // Bind the updateFocus() function above to focus/blur of form elements. $('input, textarea, select').on("focus", function(event) { updateFocus(event); }).on("blur", function(event) { updateFocus(event); }); .form-group { opacity: 0.3; } .form-group.infocus { opacity: 1; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label>Email</label> <input type="email" placeholder="Email"> </div> <div class="form-group"> <label>Name</label> <input type="text" placeholder="Name"> </div> 对此进行快速更新，这可以使用 focus-within 来完成： /* Selects a <div> when one of its descendants is focused */ div:focus-within { background: cyan; } 使用 jQuery。 $("#exampleInputEmail1").focus(function() { //change style }); 到目前为止，你所要求的在 CSS 中是不可能的。所以只有选项是使用 Jquery。如果有兴趣请继续阅读.. 使用 jquery 在 on focus 元素上绑定 input 事件，在这个事件中你只需要访问 parent 并更改它的 background-color。有如下所示的 CSS。 .background-color-RED{ background-color:#f90442; } Jquery 语法如下。 $("#exampleInputEmail1").on('focus',function() { $(this).parent().addClass('background-color-RED'); }); 额外：如果您想在用户焦点移出输入时删除背景颜色，则可以使用 blur 事件并按如下方式处理它。 $("#exampleInputEmail1").on('blur',function() { $(this).parent().removeClass('background-color-RED'); }); 这个问题已经过去很长时间了，但我看到仍然没有答案。你可以像这样做任何你想做的事： #email:has(input:focus) { /* some style */ } 如果能帮到你我会很高兴

javascript jquery html css stylesheet

回答 5 投票 0

XML 流式转换 (STX)

我正在使用样式表通过 STX 转换以下 XML 文档。但是，注释元素中 Kite 之后的所有内容在解析时都会被忽略。我如何访问...

xml xml-parsing streaming stylesheet

回答 1 投票 0

10秒后隐藏生成的CSS内容

我在内容之前添加了跨度，以使用 Font Awesome 创建问号图标，我需要在 10 秒后隐藏所有生成的 CSS 内容（之前），仅使用 CSS 代码，而不使用

css styles coding-style stylesheet

回答 1 投票 0

PyQt：为应用程序的所有文本提供颜色

我想更改 PyQt 中应用程序的外观。例如，我希望所有文本（按钮、标签等）都是白色的，所有按钮都是某种颜色。我可以改变吗...

pyqt stylesheet

回答 2 投票 0

如何使用样式表设置QTabWidget的背景透明

我在主机中设置了一张图片作为背景，并在上面添加了两个小部件：一个QTableWidget和一个QTabWidget。我已通过样式表将 tablewidget 的背景设置为透明在 vs2013 中。那个...

qt background stylesheet transparent

回答 1 投票 0

基本 CSS 问题 - 如何在 CSS 样式表中实现此功能

我听说最好将 CSS 保存在另一张纸中，我就是这样做的。我不知道如何使这部分在 CSS 样式表中工作现在我就这样把它放在... 我听说最好将 CSS 保存在另一张纸中，我就是这样做的。我不知道如何使这部分在 CSS 样式表中工作 <div style=max-width:90%> 现在我就这样写并且它可以工作，只是想知道是否还有其他更好的方法来做到这一点。现场预览  <section class="home container-fluid"> <div class="row"> <div class="col-lg-6 mt-5 py-5 pl-5"> <div style=max-width:90%> <img class="img-fluid" alt=" " src="img/app_screens_01.png"> </div> </div> <div class="col-lg-6 my-auto px-5"> <h1 class="home-content-heading">This is just the beginning</h1> </div> 始终建议将所有样式保留在 css 文件中。您可以将 class/id 分配给 div 并在 css 文件中添加样式。 <div class='some_class'> 在css文件中（当然你必须在html中调用这个css） .some_class max-width:90% 注意：- 你的类名或 id 名称应该是唯一且有意义的，以便更好地理解，而不是像我仅作为示例使用的 some_class。

css stylesheet

回答 1 投票 0

React Native 样式表未按预期工作

这是代码片段从 'react-native' 导入 { SafeAreaView, StyleSheet, Text, View } 从“反应”导入反应导出默认函数 Flatcards() { 返回（ ...

reactjs react-native stylesheet

回答 2 投票 0

如何使用样式表更改QComboBox中未选定项目的颜色？

我想更改QComboBox的样式。我想将未选定项目的文本（FR，ES，IT，..）设置为白色，因为它们是黑色的。这是使用的样式...

qt stylesheet qcombobox

回答 2 投票 0

每个页面需要一个 CSS 文件还是单独的 CSS 文件？

当我构建页面时，我想要为每个页面使用单独的样式表还是为整个网站使用一个大的样式表？出于加载目的，单个文件不是更好的做法吗...