编写javascript getById代码的角度方法
我正在做一个从AngularJS到Angular8的迁移项目
在那里我发现了这个代码
// get the pattern from SVG document and set the stroke color
var patternElt = $scope.svgDocument.find("#striped");
patternElt.css("fill", color);
// apply the striped class to the element
element.css("fill", "url(#striped)");
$(zoneClassSelector, element).css("fill", "url(#striped)");上面的代码所做的是，当一个元素被单击时，它从一个svg文件中获取一个pattern元素，并向其添加一个fill颜色，然后将其应用于已单击的DOM元素：
<defs>
<pattern id="striped"
width="8" height="8"
patternUnits="userSpaceOnUse"
patternTransform="rotate(45)">
<rect width="4" height="8" transform="translate(0,0)"></rect>
</pattern>
</defs>在我的例子中，在打字本代码中，我有以下内容
click($event: MouseEvent) {
let clickedEl = $event.target;
// check if clicked element is not an svg element
if (clickedEl instanceof SVGPolygonElement || clickedEl instanceof SVGPathElement || clickedEl instanceof SVGGElement) {
this.renderer.setAttribute(clickedEl, "style", "fill:url(#striped);");
}}
备注：SVG文件加载了它的路径(在要引用的组件视图中没有SVG )
如何在将条带pattern元素传递给renderer setAttribute之前，使用Typscript向其添加填充颜色
回答 2
Stack Overflow用户
发布于 2022-02-08 09:34:48
您可以尝试使用document.querySelector()
public fillColor(): void {
const rectElement: SVGRectElement = document.querySelector('#striped') as SVGRectElement;
rectElement.style.fill = 'red';
}<svg (click)="fillColor()">
<defs>
<pattern id="Pattern" width=".25" height=".25">
<rect x="0" y="0" id="striped" width="50" height="50" />
</pattern>
</defs>
<rect fill="url(#Pattern)" width="200" height="200" />
</svg>Stack Overflow用户
发布于 2022-02-08 14:24:57
任何DOM元素引用都可以通过ViewChild属性获得
因此，在您的情况下，您将拥有以下内容：
<pattern #MyReference
id="striped"
width="8" height="8"
patternUnits="userSpaceOnUse"
patternTransform="rotate(45)">
<rect width="4" height="8" transform="translate(0,0)"></rect>
</pattern>然后在类中引用DOM对象
@ViewChild('MyReference', { static: false })
MyElem: ElementRef;现在可以使用此引用和核心Renderer2库(导入到构造函数private renderer: Renderer2)进行任何DOM操作。
但是，如果您有一个加载了SVG元素的动态列表，并且正在寻找一种获取“在”单击的元素DOM中的方法--我将沿着创建“每个”这些元素的自定义组件的路线前进，并在这里具有clicked和元素引用。这样，每个组件都有一个单独的构建模式，并且您不必执行任何父级/同级DOM遍历。
(很基本，你会知道你需要什么输入)
<ng-container *ngFor="let svg of list">
<my-custom-component [inputs]="svg"></my-custom-component>
</ng-container>然后，使用上述方法，单击上的每个组件只具有要操作的单个模式元素引用，而不需要直接遍历DOM。它还将使您的only方法非常精确，您不需要检查单击了什么，因为只有这个组件才会触发它(不需要全局鼠标事件)。
编辑1在查看评论时，我相信您所追求的是使用全局css变量。例如，可以在XML中执行以下操作：
然后将根类设置为显示其选定的(单击)，例如：
<svg class="selected" >
<use xlink:href="#" href="#" />
</svg>然后你所做的就是通过CSS改变你的填充颜色，使之成为你想要它显示的东西。
.selected pattern
{
--fill-color:"#123456"
}如果这些问题都不合适，那么为了理解抱歉，可能需要更新一下这个问题。
https://stackoverflow.com/questions/71036951
复制![怎样编写更好的 JavaScript 代码[每日前端夜话0xA4]](https://ask.qcloudimg.com/http-save/yehe-1120945/q31rqqrbmf.png)
相似问题
角度测试，有更好的方法来编写这段代码吗？
使用变量调用extjs getById方法
如何用JavaScript数组映射方法编写循环代码
编写“编写代码”的最佳方法:：Qt
动态编写Javascript代码？
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
