在JavaScript中获取元素样式表样式
在JavaScript中获取元素样式表样式可以使用window.getComputedStyle()方法。这个方法可以获取到元素的所有计算后的样式，包括内联样式、外部样式表和浏览器默认样式。
示例代码：
const element = document.getElementById('example');
const style = window.getComputedStyle(element);
const backgroundColor = style.backgroundColor;
const fontSize = style.fontSize;在这个示例中，我们首先通过document.getElementById()方法获取到了一个元素，然后使用window.getComputedStyle()方法获取到了这个元素的计算后的样式。最后，我们可以通过style.backgroundColor和style.fontSize分别获取到元素的背景颜色和字体大小。
需要注意的是，window.getComputedStyle()方法返回的是一个只读的CSSStyleDeclaration对象，我们不能直接修改元素的样式。如果需要修改元素的样式，可以使用element.style属性。
相关·内容
以下代码警告空字符串：
HTML：
<div id="test">test</div>
CSS：
#test{
background-color: #f00;
}
剧本：
alert(document.getElementById('test').style.backgroundColor)
但是，如果我在javascript中设置bgcolor，那么它会警告bgcolor值：
document.getElementById('test').style.backgroundColor='#ff0'
浏览 0提问于2014-08-11得票数 3
回答已采纳
我正在使用javascript来构造一个SVG图形，然后将其插入到网页中。我想为这个动态创建的SVG分配一个样式表(来自外部.css文件)，但是我看到的带有样式表的SVG示例在SVG元素之外具有样式引用。
下面是构造SVG对象的javascript：
LVMGrapher.prototype.getCanvas = function()
{
if (this.canvas==null) {
var wrap = document.getElementById("svgWrap");
this.canvas = document.createElement
浏览 5提问于2013-12-19得票数 1
回答已采纳
我已经为select 'html‘指定了一些css样式，如下所示：
<style type="text/css">
html { background-color:blue; }
</style>
通过javascript，我想像这样访问style属性(一个例子)：
alert( document.documentElement.style.backgroundColor);
在Chrome中，该属性为null，在FF中，它是一个空字符串。似乎我可以通过CSS选择器访问html元素，但不能通过document.documentElement通过j
浏览 5提问于2012-02-04得票数 1
2回答
<!DOCTYPE HTML>
<html>
<head>
<title>Javascript</title>
<link id="mycss" rel="stylesheet" href="mycss.css">
<script>
function resize(s) {
var styleSheet = document.getElementByI
浏览 0提问于2015-03-05得票数 2
在以下代码中
<style>
/* Set height to 100% for body and html to enable the background image to cover the whole page: */
body, html {
height: 100%
}
body {
background-image: url('/assets/root/001.png');
// background-size: contain;
// background-position: center;
浏览 1提问于2018-08-04得票数 1
问题就说明了一切。子资源完整性检查是否阻止了本地编辑的javascript (例如在浏览器的调试窗口中)的执行？
感谢你的洞见。
浏览 2提问于2016-05-28得票数 0
回答已采纳
如何从javascript中的元素获取CSS属性top。
我已经尝试过document.getElementById(element).offsetTop，但是它总是返回0。当我在元素的CSS中设置top: 500px；时。
浏览 0提问于2009-11-12得票数 0
我正在看一个网站模板。
我发现当用户点击一个链接时，它会用下面的命令运行一个JavaScript来改变站点主题：
$('link#theme').attr('href', 'theme2.css');
在jQuery中，这个选择器是什么意思？此命令在我的页面中更改了什么对象？
浏览 3提问于2016-02-04得票数 0
1回答
我正在构建一个webkit上的应用程序，我需要修改一个CSS文件(编辑选择器)，这是我可以做到一旦页面加载使用Javascript。在我的特定场景中，我可能会多次加载页面，并且我想改变缓存中的CSS (使用Javascript，而不是黑客webkit)。有什么想法吗？
浏览 1提问于2012-07-25得票数 0
1回答
嘿，我如何使用javascript加载一个仅基于id的css样式表？下面是我的代码：
<link id='bs-css' rel='stylesheet' href='bootstrap-cyborg.css' type='text/css' />
我只希望能够在我想要的div上使用它，所以类似于下面的代码：
<div id="bs-css">
some code
</div>
我试过这段代码，但它的功能并不像我想要的那样，下面是代码：
<script type=
浏览 4提问于2013-08-08得票数 0
1回答
我正在做一个例子，我偶然发现了这个。
我最初将div设置为折叠，然后从javascript函数中检查其状态。我最初测试的是“无”，但它并没有起作用。经过一些测试后，我发现对"“的测试确实有效。这是标准还是我在做什么？
工作版本：
<div id="menuItem" class="well collapse">
<p id="itemDesc">test</p>
</div>
...
function showItem(itemName){
if (document.getEleme
浏览 1提问于2017-10-09得票数 0
回答已采纳
我有一个关于CSS的基本问题，因为我对web开发非常陌生。
我们可以在特定于URL的网页上应用CSS样式吗？
我知道CSS没有像Javascript那样的if else条件，但我只是想检查一下有没有什么聪明的方法。或者这根本不可能。
例如，在javascript中，您可以执行以下操作：
if (window.location.href.indexOf("webpage1.com") > -1) {
.................
...................
................
}
我们也可以用CSS做类似的事情吗？
请给我提供宝贵的建议。
浏览 8提问于2017-04-13得票数 2
1回答
我需要使用由JS计算的一些数据(例如:窗口大小)作为某些HTML元素的css属性。为了避免由于布局变化而闪烁窗口，我不能使用document.onready。实际上，当DOM元素添加到DOM树时，我需要触发JS函数。
我尝试过使用事件，但它似乎只为添加了JavaScript后加载的HTML代码的元素触发。
我需要的是改变标签，是在原来的HTML源代码中显示的页面。因此，现在我只是在必须更改的标记的JavaScript代码之后内联JS，但是有什么方法可以做到这一点，而无需在每个这样的标记之后内联JS。类似于DOMNodeInserted的内容，但在呈现原始HTML时触发。或者，我如何做到这一点?
浏览 2提问于2012-01-26得票数 1
回答已采纳
我正在使用浮动元素和负边距设置响应式布局。
调整浏览器的大小一切都很顺利:桌面的内容+左右侧边栏，平板电脑的内容和右侧侧边栏，手机的左侧和右侧侧边栏。
我使用JavaScript来改变负边距，例如，当按钮被单击时，将左侧边栏带到画布上，并在再次单击时将其移回画布上，回到其原始位置(在调试中得到确认)。
但是，现在我已经用JavaScript操作了页边距，现在调整浏览器的大小破坏了布局，因为当我超过媒体查询阈值时，我用JavaScript更新的属性不再更新。
媒体查询仍在“工作”--例如，菜单按钮的显示如媒体查询中所建立的那样切换开和关。
我需要做什么才能“刷新”我的媒体查询，以便它们使用Jav
浏览 2提问于2013-05-23得票数 1
回答已采纳
5回答
我正在尝试使用javascript/jQuery从头部获取特定的样式表。我不想使用$('head').get(0).innerHTML或类似的原因，因为头部填充了30多个脚本和链接元素。
我已经试过了
// that's the one
var $my_stylesheet = $(document.body.previousSibling).find('link:last');
//those did not work (result: "")
$my_stylesheet.get(0).innerHTML;
$my_styleshe
浏览 4提问于2011-11-23得票数 5
回答已采纳
我需要在JavaScript中获取图像的左上角位置。我在全局样式表中定义了图像的位置：
<style type="text/css">
img.movable { position:relative; top:0px; left:375px; }
</style>
当我使用全局样式定义图像时
<img id="image11" class="movable" src="testimage.jpg" onclick="jump()" />
style.left属性为空：
<s
浏览 1提问于2010-12-09得票数 0
回答已采纳
下面的代码会产生预期的结果：
<script>
function Show_Visibility(){
p = document.getElementById("i_button_2");
alert(p.style.visibility);
}
</script>
<INPUT TYPE = "button" id = "i_button_1" value = "This is Button 1" onclick="Show_Visibility()"&g
浏览 0提问于2015-03-13得票数 1
考虑到以下JavaScript、CSS和HTML：
console.log(getComputedStyle(document.querySelector('p'), '::after').getPropertyValue('content'));
p::after {
content: "Hello" attr(data-after);
}
<p data-after=" World"></p>
火狐和IE11都返回CSS："Hello" attr(data
浏览 0提问于2019-03-17得票数 7
1回答
我不知道我会不会完全疯掉，或者我的电脑出了什么问题。
下面有一个简单的JavaScript，但是当我控制台记录样式对象时，它完全是空的。这是尽管事实，在这方面的元素，显然有风格附加到它。
<!doctype html>
<html>
<head>
<style>
#para{
width: 100px;
height: 100px;
position: absolute;
left: 200px;
top: 10px;
border:
浏览 6提问于2015-01-29得票数 0
回答已采纳
我正在学习JavaScript，在文本中它说你必须使用本地定义的动画样式。即HTML样式标签。这有意义吗?如果有，为什么这么做是必要的？提前谢谢。
浏览 3提问于2011-05-25得票数 0
回答已采纳
我想知道为什么在使用.css()函数时，它会覆盖CSS中的伪类，比如:hover。它不应该只影响元素的正常状态，而不是:hover元素的正常状态吗？或者我做错了什么？
下面是一个例子
<!DOCTYPE html>
<html>
<head>
<style>
#test {
background : red;
width: 50px;
height: 50px;
opacity : 0.2;
}
#test:hover {
浏览 1提问于2012-08-31得票数 0
回答已采纳
假设您有一个外部样式表(<link>)，然后是一个<script>。外部样式表是否总是在<script>执行之前应用，以便getComputedStyle始终尊重外部样式表的规则？
还是允许浏览器在应用早期样式表之前运行JavaScript？
示例：
<!doctype html>
<html>
<head>
<link href="/my-stylesheet.css" rel="stylesheet" />
</head>
<body&g
浏览 4提问于2015-04-17得票数 5
回答已采纳
如何打印网页？更确切地说，我只想打印网页中的一个表格。
我知道了如何打印所有的页面，就像这样：<A HREF="javascript:window.print()">
我真的不知道javascript。我可以将它修改为javascript:table.print()吗？
谢谢，塞巴斯蒂安
浏览 1提问于2010-06-21得票数 0
回答已采纳
我试图在我的JavaScript代码中获得一个CSS变量的值。我正在使用下面的代码片段来实现这一点。在这个例子中，我得到了我在CSS中定义的某种红色。
let red = getComputedStyle(document.documentElement).getPropertyValue('--red')
问题是，只有当我将代码包装在如下所示的setTimeout块中时，此代码才能工作。
setTimeout(() => {
let red = getComputedStyle(document.documentElement).getPropertyValue(&
浏览 2提问于2021-08-29得票数 0
回答已采纳
元素的style.display返回值undefined的原因可能是什么
在我的Javascript中，我有一个if语句检查
if (document.getElementById("myModal").style.display != 'none'){
console.log("The pop up is visible.");
do something
}
在我的CSS中，我将myModal设置为display: none;
myModal是一个可通过单击访问的弹出式表单。
我将js文件的<script>移到了H
浏览 27提问于2016-08-24得票数 0
回答已采纳
1回答
在HTML中有以下标记：
<img id="img-1" src="image.jpg" alt="random" width="300" height="168"/>
在javascript代码中，如果我这样做的话：
var x = document.getElementById("img-1");
console.log(x.style.visibility) -->这显示为"“
在我的css中我指定了-
img {
visibility: visible;
}
不
浏览 4提问于2021-01-27得票数 0
回答已采纳
6回答
我需要在HTML5画布上显示Rails资产管道中的图像，但我需要知道JavaScript中资产的路径。我将用于应用程序的其他部分，但它似乎没有提供一种方法来获取资产管道中某些内容的路径。
从JavaScript获取Rails资产(例如，图像)的路径的正确方法是什么？
浏览 1提问于2012-11-15得票数 22
回答已采纳
document.styleSheets[i].ownerNode有可能成为null吗
根据的说法，ownerNode只能是通过@import导入的样式表的null。但是这类样式表不应该在document.styleSheets中列出，因为它只包含“显式链接到文档或嵌入到文档中的样式表”()。
尽管如此，我仍然观察到JavaScript错误，表明在某些情况下，document.styleSheets[i].ownerNode确实可以是null。这种情况发生在最新的Chrome (版本107)上。
不幸的是，生成错误的代码不是我的，而是一些人在访问我的网站时使用的Chrome扩展的一部分。我自己
浏览 27提问于2022-12-02得票数 -1
1回答
在我的样式表中，我定义了一些自定义引号https://developer.mozilla.org/en-US/docs/CSS/quotes，，但是当我尝试使用JavaScript访问它们时，它会给我默认值，尽管它存在于实际的CSS中；任何想法都将非常感谢：
>> document.getElementById('-my-widget-style')
<style id="-my-widget-style" type="text/css" media="all">...</style>
&g
浏览 2提问于2012-09-04得票数 0
回答已采纳
请您解释一下，我如何获得通过css (例如，background:ulr())使用javascript或jQuery添加的html元素的正确路径。
var img = document.querySelectorAll('*');
img.forEach(function(i){
var imageSrc = new Image();
i.addEventListener("mouseover", function(e){
if(i.style.background){
}
})
});
i.style.
浏览 1提问于2018-02-02得票数 2
回答已采纳
我正在将html转换为xslt，在我的html中有两个这样的标记
<script type='text/javascript' src="slider/js/jquery-1.4.4.min.js" jquery.mobile, carousel></script>
<script type="text/javascript" src="slider/js/jquery-ui-1.8.5.js" jquery.mobile, carousel></script>
但是，如果我从x
浏览 1提问于2012-09-06得票数 0
我有多个小部件，可以添加到各种Web页面中。每一个都有自己的样式表：
<link type="text/css" href="http://mySite/widget1.css" />
<script type="text/javascript" src="http://mySite/widget1.js"></script>
样式表是每个小部件特有的，非常短(5到10个声明)。
我正在考虑在脚本中动态创建样式表，原因有两个：
我觉得维护两个单独的文件很痛苦
用一个替换两个http请求将
浏览 7提问于2012-02-15得票数 2
回答已采纳
我一直在使用John Resig的来自专业JavaScript技术的getStyle函数来获取元素的样式：
function getStyle(elem, name) {
// J/S Pro Techniques p136
if (elem.style[name]) {
return elem.style[name];
} else if (elem.currentStyle) {
return elem.currentStyle[name];
}
else if (document.defaultView &&
浏览 2提问于2008-12-27得票数 4
回答已采纳
对于我正在制作的动画库，我需要过渡和动画。
过渡很简单。我可以轻松地从元素对象的样式属性访问转换属性：
document.body.style['-webkit-transition'] = "background 1s";
document.body.background = "#f00";
我知道在CSS中，动画有两个部分，@-关键帧，然后调用实际动画。
如何通过纯为分配@-关键帧规则？
因为@-关键帧规则不直接应用于元素，所以不会是类似于转换的东西。
替代方法是通过字符串通过JavaScript动态创建@-keyframes规则
浏览 5提问于2013-12-04得票数 1
回答已采纳
我有一个反应网页与超文本标记语言组件，其中一些是样式与CSS，而其他的是样式与javascript ()。我想要的是HTML代码与内联CSS，准确地复制页面的外观在电子邮件中发送。
我知道我可以使用像这样的包内联CSS，但我想知道是否有可能以某种方式将js定义的Glamor样式转换为普通CSS并内联它？
如果这是不可能的，那么我可能会探索一种不同的途径(拍摄页面的PDF快照)。感谢您的帮助！
浏览 0提问于2018-01-13得票数 0
3回答
从javascript导入css样式表最好的(最优雅的:)方法是什么？
也许dojo有一些类似于dojo.require的模块？
谢谢你的帮助。
浏览 3提问于2011-09-02得票数 3
2回答
我应该如何在Javascript中做到这一点
// CSS
*::-moz-selection{
background:transparent;
}
我试过这些，但并不是很有效：
// Javascript
document.mozSelection = "transparent";
document.body.mozSelection = "transparent";
浏览 0提问于2010-10-26得票数 3
回答已采纳
1回答
我正在尝试使用这里讨论的CSS3媒体查询技术...
如果我从下面抓取代码，并使用某种仿真器在新页面上运行它，该仿真器将自己标识为具有小屏幕的设备(例如device Central或Protofluid)，我可以在Charles中看到，即使选择了正确的样式表，仍会对每个CSS文件发出请求，这是正常行为吗？
<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480p
浏览 0提问于2011-03-30得票数 2
我在JavaScript中创建了一个函数，将style.right应用于元素。根据媒体宽度，我要向其应用以下三种样式之一
listElements[i].style.right = "calc(425 * " + portfolioScrollPosition + "px)";
或
listElements[i].style.right = "calc(33.333 * " + portfolioScrollPosition + "vw)";
或
listElements[i].style.right = "calc(50
浏览 2提问于2022-04-18得票数 0
让我试着说得尽可能清楚，尽管这并不容易。好的，我在div里面有一个圆，我知道这个div里面的圆的x和y坐标。
如何创建JavaScript或HTML工具提示，使其指向我单击的位置(在本例中为圆形)？
下面是图像，这样您就可以更好地理解我正在尝试做的事情：
现在我知道你们中的一些人会想:为什么不直接使用circle的id并让工具提示指向那个方向呢？因为圆是作为JavaScript对象动态创建的，并不是HTML语言的一部分。
因为绘图节省了时间:我在哪里可以找到从上面指向的工具提示脚本？类似这样的东西，下面是另一个：
浏览 1提问于2009-11-11得票数 2
回答已采纳
1回答
我有Javascript代码用CSS构建一个小div层。div层有内联样式代码，可以按照我想要的方式显示。我注意到div层在一些微型站点上看起来扭曲了。有没有办法编写内联样式代码，使其不被其他CSS覆盖？
提前感谢
浏览 2提问于2012-02-01得票数 0
我有一个带有内联背景颜色(样式属性)的div，其中有一个标题、一个noscript标签和一个带有下拉菜单的表单(选择标记)。
如果标题和noscript是在下拉菜单之前找到的，那么它们就隐藏在背景色后面，只有在用鼠标选择文本时才会再次出现焦点。下面是重现问题所需的最小代码示例(例如，我去掉了javascript代码)。这段代码也是一个静态的html文档，然后就不会出现问题了。
<?xml version='1.0' encoding='ISO-8859-1'?>
<xsl:stylesheet version='1.0' xml
浏览 3提问于2010-11-09得票数 0
回答已采纳
8回答
是否可以通过JavaScript更改CSS伪元素样式？
例如，我想动态设置滚动条的颜色，如下所示：
document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");
我还希望能够像这样告诉滚动条隐藏：
document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";
浏览 96提问于2010-12-19得票数 85
回答已采纳
似乎只有当我想检查元素是否显示时，javascript才能准备内联css：
el.style.display
但是如何检查display:none是否被放置在外部CSS文件中？
浏览 2提问于2010-05-12得票数 0
回答已采纳
1回答
我在使用Bootstrap的导航栏上引用以下示例： https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h 复制HTML后，我将其放入我的JSP页面。以下是最终的HTML： <html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=de
浏览 19提问于2020-04-11得票数 2
回答已采纳
2回答
创建时设置Div的高度
、、、
我有以下css类
.QueueHeader {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #AAAAAA;
border-radius: 5px 5px 5px 5px;
cursor: pointer !important;
height: 91px !important;
width: 53% !important;
}
我用javascript编写了以下代码：
var divContent = document.getElementById("con
浏览 0提问于2012-06-06得票数 0
回答已采纳
1回答
因此，我正在阅读微软用HTML5和JavaScript和CSS3编写的这本书，还有使用表格的练习，这里有一个css规则来显示和隐藏一些元素，但只有隐藏或实际上在css显示中的元素:无一个属性正在工作，而显示:normal表示它在css中是一个无效的值。
.hidden {
display: none;
}
.visible {
display: normal;
}
这本书是否真的错了:正常的属性，还是我做错了什么？
浏览 2提问于2015-12-25得票数 4
回答已采纳
3回答
劫持CSS定义
、、
我需要一种JavaScript/jQuery的方式来“劫持”CSS定义，而不是基于类或ID。
示例CSS：
input {
border: 1px solid red;
}
如果我有一个文档，假设文档中有一个<span>元素，我想把这个元素添加到这个定义中。
所以我使用$(this).magicAwesome();，input CSS定义中定义的红色边框也将应用于这个非输入元素。
有没有办法达到这个效果？我不管这是不是黑客。:)
提前感谢大家！
浏览 0提问于2012-03-16得票数 3
回答已采纳
我有一个幻灯片菜单使用香草javascript在手机上使用，但到目前为止，我的所有测试结果是移动浏览器忽略了第一个点击(已经尝试了两个触摸屏&点击作为事件)。从第二个抽头开始，它对每一个后续的抽头都能很好的工作。
因为打开和关闭菜单是页面上唯一的javascript函数，所以我不想加载一个庞大的库，我想保持它的简单和小。我的代码如下：
var b = document.getElementById('menubtn');
b.addEventListener('touchstart', function (e) {
var n = documen
浏览 7提问于2015-12-14得票数 12
1回答
我一直在尝试为google plus创建一个主题，在chrome扩展中使用javascript/jquery将它变成黑色、蓝色和白色。我遇到的问题是，当你点击一个链接，比如照片按钮，它不会在页面加载时重新运行脚本。不过，当您刷新照片页面时，它会运行并且看起来是正确的。当你向下滚动时，同样的事情也会发生在主页上。它加载的新内容不符合我的设置。
我是javascript/jquery的新手，所以这个问题已经困扰我好几天了。
这是我的代码。
function init() {
var newHTML='<a href="http://plus.google.com/"&
浏览 0提问于2012-03-22得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
