我知道$("#divId").html()会给我innerHtml.我还需要它的样式(可能通过类的方式定义)内联style属性或单独<style>标记内的所有样式/类.
可能吗？
更新
如果html是什么样的,<div id="testDiv">cfwcvb</div>并且#testDiv外部样式表中定义了css类？
更新2
很抱歉没有提前澄清这一点
如果这是我的HTML
<div id="divId">
<span class="someClass">Some innerText</span>
</div>
样式在单独的样式表或头部样式中定义.
#divId {
clear: both;
padding: 3px;
border: 2px dotted #CCC;
font-size: 107%;
line-height: 130%;
width: 660px;
}
.someClass {
color: blue;
}
然后,当我尝试获取内部html $("#divId").html()或调用任何其他自定义函数时,我需要类似下面的内容
<style>
#divId {
clear: both;
padding: 3px;
border: 2px dotted #CCC;
font-size: 107%;
line-height: 130%;
width: 660px;
}
.someClass {
color: blue;
}
</style>
<div id="divId">
<span class="someClass">Some innerText</span>
</div> …我试图编写一个函数,它接受一个元素的Id,并给出在该元素上应用的所有样式属性(及其值)的列表.它应该考虑内联样式以及css文件中定义的样式.
当我在参数中提供样式属性名称以及元素的id时,我可以使函数工作,但我只想传递元素的id,并且应该能够获得所有样式属性以及值.
函数应该类似于getStyleById(elementId);
到目前为止PFB的代码片段:
var styleNode = [];
var styles;
var sty = x.style;
var len = sty.length;
for (var i = 0; i < len; i++) {
styles = sty.item(i);
if (x.currentStyle) //IE for External/Global Styles
{
var a = x.currentStyle[styles];
styleNode.push(styles + ":" + a);
}
else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox,Chrome,Safari for External/Global Styles
{
var b = document.defaultView.getComputedStyle(x, "").getPropertyValue(styles);
styleNode.push(styles + ":" + b);
}
else //Works in Inline Styles only
{
var c = x.style[styles]; …简而言之:如何将生成的组件CSS作为字符串？
- >我想获得组件的快照.也就是说,这个视图看起来像什么.正如你点击右边看到的那样 - >检查.Html&css 独立于任何Javascript 呈现组件.
动机:使用该快照以便以后导出为PDF.我可以在服务器方面创建PDF,但是由于Angular有一个整洁的模板引擎,为什么不使用它呢？欢迎评论.
我设法从我的组件中获取快照html代码,banana如下所示:
// banana component file
@Component( {
selector: 'banana',
template: `<div id="report">some text</div>`,
styles: [ '#report { font-weight:bold; }' ]
})
export class BananaComponent {
constructor(public elementRef: ElementRef) { }
}
// parent component file
@Component(...)
export class App {
@ViewChild(BananaComponent) myBanana;
private getSnapshot() {
let bananaSnapshotHtml = this.myBanana.elementRef.nativeElement.outerHTML;
let bananaSnapshotCss = // ?? TODO
}
}
snapshotHtml例如,变量如下所示:
<banana _ngcontent-c2="" _nghost-c4="" ng-reflect-render="true"><!--bindings={
"ng-reflect-ng-if": "true"
}--><div _ngcontent-c4="" id="report">
some …我需要获得元素的级联样式值(不是计算的),或者确定是否计算了实际值.
例如,如果我有一个带css规则的元素width: 100%,我想获取值100%而不是实际的像素值,或者只是想知道实际值是计算出来的.
我知道我可以使用它elem.currentStyle,而且我还在Chrome中找到了一种方法来使用它document.defaultView.getMatchedCSSRules().
有没有人知道在其他浏览器中获取它的方法？
我想在DOM中获取一个元素,然后查找我的CSS文件中的哪些规则有助于它的外观.类似于firebug或webkits检查员所做的事情.有没有办法在JavaScript中执行此操作？
更新:
我应该提供一个约束和一个特定的例子 - 我只对在基于webkit的浏览器中实现这一点感兴趣,因此跨浏览器的困难不是一个问题.我特别想要实现的是这个.假设我有一个样式表如下:
div {
background: #f0f0f0;
}
.example {
padding: 10px;
}
然后让我们说一些像这样的HTML代码:
<div id="test" class="example">
<hgroup>
<h1>Test</h1>
<h2>A sample file to play with.</h2>
</hgroup>
<ul class="sample">
<li id="item_1">Item 1</li>
<li id="item_2">Item 2</li>
</ul>
</div>
那么在javascript中我希望能够有一个函数可以从CSS中找到构造对象的选择器:
get_selectors_for(document.getElementById('test'))
// should return:
// ['div','.example']
知道我们只需要担心webkit而不是所有浏览器,反向查询选择器有多复杂？
我有JS库,我有这个问题:我正在使用等宽字体创建用于计算字符大小的临时元素.现在我正在复制风格,但我需要原始的所有样式,包括css变量.我不想克隆元素,因为里面有我不需要的元素.此外,元素可能具有用户设置的id,不确定当存在两个具有相同id的元素时这将如何表现,因此将每个样式复制到新的临时元素会更好(我认为).
我有基于这些的代码:
我的代码看起来像这样:
function is_valid_style_property(key, value) {
//checking that the property is not int index ( happens on some browser
return typeof value === 'string' && value.length && value !== parseInt(value);
}
function copy_computed_style(from, to) {
var computed_style_object = false;
computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from, null);
if (!computed_style_object) {
return;
}
Object.keys(computed_style_object).forEach(function(key) {
var value = computed_style_object.getPropertyValue(key);
if (key.match(/^--/)) {
console.log({key, value}); // this is never executed
}
if (is_valid_style_property(key, value)) {
to.style.setProperty(key, value);
}
});
}
问题是 …
有没有办法获取应用于特定html元素的仅用户定义的计算css样式列表.样式可以通过外部css文件或嵌入/内联样式以任何方式应用.
.p1{font-size:14px; line-height:20px;}<style>
.p1{ line-height:18px; color:green;}
</style>
<p class="p1" style="color:red;">Some Paragraph</p>现在我需要的列表是应用于元素的唯一用户定义的计算样式,而不是包含由window.getComputedStyle()提供的空白/ null/default-values的整组计算样式
为了更准确地解决我的问题,我想首先介绍一个我访问网站的场景,我想使用开发人员工具栏以编程方式获取唯一的用户定义样式(或者通过在控制台上编写一些脚本) .因此,考虑到这种情况,我要求的最终产出应该是 -
{
'color':'red',
'line-height' : '18px',
'font-size' : '14px'
}
如果需要,请纠正我的疑问或解释中的任何错误.
我有一个元素已经转换为a matrix3d给它透视.它代表手持设备的屏幕.
有一个背景图像显示了手持设备本身,并没有转换.定位保持它的元件,并且屏幕元件绝对位于其中,在left: 0; top: 0;容器的左上方,然后变换,其中原点位于容器的左上方.这是我与背景图像完美排列的最简单方法(我使用这个非常方便的工具来提出矩阵),它将屏幕元素从角落移开.
我希望能够通过鼠标和触摸事件与屏幕进行交互.为此,在点击或触摸事件中,我需要找到屏幕元素的局部坐标系中的坐标 - 即变换发生前的坐标.换句话说,当点击手持设备屏幕的左上角(不是页面边界框的左上角!)时,我想要[0, 0],当点击屏幕的右上角时,在这个转换的情况下实际上是在页面上以及右边,我想要的[untransformedWidth, 0].
鼠标事件提供offsetX并offsetY据称正是这样做的(下面更多内容),但触摸事件没有这些属性,所以我需要一种方法来自己计算它们.
使用math.js我可以输入转换矩阵并将其反转.我有一些代码来循环CSS规则来获取transform: matrix3d(...)规则(如果我不需要,我不想在我的代码中重复它),我将跳过 - 我知道它有效,因为数字匹配CSS.
请注意,CSS的列矩阵元素按列顺序排列,因此请matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)使用常规矩阵表示法,如下所示:
? ?
? a e i m ?
? b f j n ?
? c g k o ?
? d h l p …假设我有
<head>
<style type="text/css" id="style1">
.foo {
...
}
</style>
<style type="text/css" id="style2">
.bar {
...
}
</style>
</head>
<body>
<div class="foo">
</div>
</body>
在Chrome DevTools中，<div class="foo">元素的样式检查器将具有指向定义<style id="style1">标签的链接.foo。
是否有任何DOM API可以有效地进行查找？
我能想到的找到<style>元素的唯一方法是像这样的低效率的蛮力搜索：
function findStyleElementForClass(cls) {
if (!cls.startsWith('.')) cls = '.' + cls
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i]
var rules = sheet.rules || sheet.cssRules
for (var j = 0; j < rules.length; j++) {
if …在追加到body之前我需要元素宽度.
以下脚本工作正常firefox但不在google chrome
<style>
.testDiv { width:150px; height:100px; }
</style>
<script>
var div = "<div class='testDiv'>Div Content</div>";
alert($(div).width());
</script>
它150在firefox和0chrome中提供输出
我也试过了
$(window).load(
function() {
alert($(div).width());
}
);
但它的工作原理相同......
更新:
我可以看到,如果我宣布css inline它有效,但我需要使用它css class
var div = "<div style='width:150px;'>Div Content </div>";
alert($(div).width());
我想检查div元素的右边填充值.我使用jquery .css()方法:
$('div').css('padding-right');
有用.现在我需要知道它的价值来自哪里.它可以通过内联defenition:
<div style="padding-right: 100px;">
或者它可以在外部css文件(或<style></style>部分)中写入:
div {
padding-right: 100px;
}
谢谢!