[英]How to change css via Jquery on dynamically created element before adding to document DOM
我有这个动态创建的元素,通过第 3 方库 (jsondiffpatch.formatters.html.format()) 创建。
在添加到文档 DOM 之前,我想做一些 css 和内容更改。
我尝试这样做但失败了:
function transformDelta(deltaHtml: any) {
$(deltaHtml)
.find(".jsondiffpatch-delta > ul > li")
.each(function () {
console.log($(this).text());
});
return deltaHtml;
}
这是怎么做的?
附加代码:
显示 json 变化的按钮
<ChangesModalButton
variant="primary"
getMatrixDelta={() => {
const delta = diffpatcher.diff(orig, cur);
const deltaHtml = jsondiffpatch.formatters.html.format(delta);
const Container = (
<div dangerouslySetInnerHTML={{ __html: deltaHtml }} />
);
return Container;
}}
/>
显示模式的 Button 定义
export function ChangesModalButton(props: any) {
const [modalShow, setModalShow] = React.useState(false);
const [matrixDelta, setMatrixDelta] = React.useState<any>(null);
return (
<React.Fragment>
<ChangesModal
matrixDelta={matrixDelta}
/>
<Button
onClick={() => {
setMatrixDelta(props.getMatrixDelta());
setModalShow(true);
}}
>
<img src={seeChangesMatrixImg} alt="" />
</Button>
</React.Fragment>
);
}
模态定义
class ChangesModal extends Component<any> {
render() {
return (
<Modal
>
<Modal.Body>{this.props.matrixDelta? this.props.matrixDelta: "No Changes"}</Modal.Body>
</Modal>
);
}
}
首先,在渲染 dom 之前,您不能进行 css 更改。 渲染 Dom 后,您可以进行 css 更改。
如果您要更改 css 中的元素颜色,假设元素是 p1 然后
$(p1).css('color','blue');
$('#myId').css('color','blue');//to target id let say Id : myId
$('.myClass').css('color','blue');//to target class let say css: myClass
或者改变它的内容
$(p1).html("this is new text added dynamically with JQuery");
$('#myId').html("this is new text added dynamically with JQuery");//to target id let say Id : myId
$('.myClass').html("this is new text added dynamically with JQuery");//to target class let say css: myClass
只需使用 css 方法https://api.jquery.com/css/如下
function transformDelta(deltaHtml: any) {
$(deltaHtml)
.find(".jsondiffpatch-delta > ul > li")
.each(function () {
$(this).css({"color": "red"})
console.log($(this).text());
});
return deltaHtml;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.