我一直在尝试grid-template-areas用javascript 修改.我elem.style在DOM 中的css属性list()中找到了一个名为:的属性gridTemplateAreas.但我似乎无法用javascript改变它.
如何grid-template-areas使用javascript 修改-property？
这是我试过的代码:
window.addEventListener("click", function(){
let elem= document.getElementById("grid");
elem.style.gridTemplateAreas =
"z z z"
"a b c"
"d e f"
console.log("The grid-template area should have been redefined now. The blue block should have move to the top row.");
});#grid{
width: 100px;
height: 100px;
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "x x x"
"y y z"
"y y z";
}
#div1{
background-color: blue; …我想将 svg-mask 分配给 svg-image。我可以使用面具上的 id 来完成这项工作，如下所示：
<svg id="svg1" width="5cm" height="5cm" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<mask id="mask">
<circle cx="100" cy="100" r="100" fill="white"></circle>
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#mask)"></rect>
</svg>但是我想多次加载这个 svg，并在 svg 标签中使用不同的 id。因此我将生成“#mask”-id 的重复项。使用多个 id 是无效代码。所以我想用一个类来引用合适的掩码。这意味着我无法使用mask=url()- 技术。
<svg id="svg2" width="5cm" height="5cm" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<mask class="mask">
<circle cx="100" cy="100" r="100" fill="white"></circle>
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(can't use this)"></rect>
</svg>如果掩码具有类而不是 id，有没有办法将掩码应用于 rect 元素？也许使用 javaScript …
我一直在阅读 svg 规范。我阅读了tref-element https://www.w3.org/TR/SVG/single-page.html#text-TRefElement。你们中的大多数人可能都知道这tref将被 / 被贬低。这让我想知道现在如何做同样的事情。应该不会太难，但我真的找不到关于这个主题的任何内容。我也很好奇贬低tref. 但这只是一个“有趣的事实”。简而言之：
svg
<svg>
<defs>
<text id="ReferencedText">
Referenced character data
</text>
</defs>
<text x="100" y="200" font-size="45" fill="red" >
<tref href="#ReferencedText"/>
</text>
</svg>
我试图在组件初始化后在输入字段中选择一些文本。我知道我可以用 a 来做到这一点setTimeout()，但这感觉有点太老套了。
大多数挂钩在通过双向绑定加载输入文本之前运行。每当有人选择其他字段时，其他字段也会运行。
代码： https: //stackblitz.com/edit/angular-pxrssq
import { Component, OnInit, Input, ViewChild } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<input #input type="text" [(ngModel)]="info.one"/>
<input type="text" [(ngModel)]="info.two"/>`,
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() info;
@ViewChild('input', {static: true} ) input;
constructor() { }
ngOnInit() {
this.input.nativeElement.select();
}
}
是否有一个生命周期钩子在组件初始化后但在双向绑定加载后运行一次？
我有一个简单的有角材料模态。我想在打开/加载时聚焦“是”按钮。tabindex='-1'我确实通过在提供程序中设置“否”按钮来实现这一点autoFocus: true。然而，这会导致用户体验问题，即您无法使用键盘聚焦“否”按钮。如何聚焦第二个按钮，同时保持可通过键盘访问它。我也尝试过使用tabindex，这似乎并没有影响选择。我正在寻找一个优雅的解决方案（所以最好不要编写一些打字稿来解决它）
对话框.组件.html
<h2 mat-dialog-title>Cookie request</h2>
<mat-dialog-content>Should we use a cookie to automatically log you in next time?</mat-dialog-content>
<mat-dialog-actions>
<button mat-button [mat-dialog-close]='false' tabindex='-1'>No</button>
<button mat-button [mat-dialog-close]="true" tabindex='1'>Yes</button>
</mat-dialog-actions>
摘自 app.module.ts
@NgModule({
declarations: [...stuff],
imports: [...stuff],
providers: [
{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: true, disableClose: true, autoFocus: true }}
],
entryComponents: [
DialogComponent
],
bootstrap: [AppComponent]
})
官方文档： https: //material.angular.io/components/dialog/api
可选：如何强制焦点留在我的模式中，直到它关闭？
我想使用 javascript 将某些实体转换为它们的实体编号。有没有一个功能可以做到这一点？我可以为某些特定实体做吗？
例子：
我想€在控制台中输出 € 实体作为其 html-entity 编号：
这是JSFiddle
html
<div>I want to retreive the euro character from the button, get the html code that belongs to it and output it in the console.log. So the console.log should state: "Euro-symbol: (html code here)!!!"</div>
<button id="alt-char">Euro-symbol: €!!!</button>
javascript
var a = document.getElementById('alt-char').innerHTML;
console.log(a);
我想知道是否有可能将多个if语句重写为switch.
问题是switch运行:
案件通过检查后的所有代码.这就是为什么case语句在第一个案例之后运行所有代码的原因.
let arr = [1, 3];
if( arr.includes(1) === true ) {
console.log('if 1');
}
if( arr.includes(2) === true) {
console.log('if 2');
}
if( arr.includes(3) === true) {
console.log('if 3');
}
switch( true ){
case arr.includes(1):
console.log('switch 1');
case arr.includes(2):
console.log('switch 2');
case arr.includes(3):
console.log('switch 3');
}let arr = [1, 3];
if( arr.includes(1) === true ) {
console.log('if 1');
}
if( arr.includes(2) === true) {
console.log('if 2');
}
if( arr.includes(3) …