javascript - Apply CSS on the parent element -
below html source application generating.
<div id="xcp_columnvbox-1053-innerct" class="x-box-inner " role="presentation" style="height: 1210px; width: 1614px;"> <div id="xcp_columnvbox-1053-targetel" class="x-box-target" style="width: 1614px;"> <div class="x-component xcpid_d3_workflow x-box-item x-component-default" style="width: 1600px; height: 1200px; right: auto; left: 5px; top: 5px; margin: 0px;" id="d3_workflow-1054"> <svg width="1600" height="1200" pointer-events="all" id="wkfsvg"> <rect class="background" width="100%" height="100%"></rect> <g transform="translate(105.72459429343519,80.37030244629102) scale(0.8705505632961247)"> <path class="link reject" d="m253.5984380214502,402.1890855465788l279.88016976277135,217.71424055243128"></path><path class="link reject" d="m319.40688436217283,627.4974326890339l258.6978412705136,444.27907127147273"></path><path class="link reject" d="m770.9526019432966,1041.799747984542l678.8002646503626,1008.9547951583202"></path><path class="link reject" .... .... .... </g><defs><marker id="end-arrow" viewbox="0 -5 10 10" refx="8" markerwidth="6" markerheight="6" orient="auto"><path d="m0,-5l10,0l0,5l2,0" stroke-width="0px" fill="#000"></path></marker></defs> </svg> </div> </div> </div>
on div tag, need apply 'overflow: scroll' in 'style' attribute. below attempt using chrome developer tools -
the challenge here that, id 'd3_workflow-1050' of element auto generated, anything. result, cannot apply css based on id.
if static id, have created css -
#d3_workflow-1050 { width: 500px; height: 500px; overflow: scroll; }
however, sub element has id 'wkfsvg' , static id. can use id , apply css parent div?
if element created dynamically , id dynamic best possible solution assign predefined calss element d3-workflow
use css rule like
.d3-workflow { width: 500px; height: 500px; overflow: scroll; }
if not possible, have use javascript, have makesure script executed after elemetn created like
document.getelementbyid('wkfsvg').parentnode.style.overflow = 'scroll'
or use assign class using javascript like
var el = document.getelementbyid('wkfsvg').parentnode; el.classname = (el.classname || '') + ' d3-workflow';
if want support modern browsers then
document.getelementbyid('wkfsvg').parentnode.classlist.add('d3-workflow')
Comments
Post a Comment