javascript - Apply CSS on the parent element -


below html source application generating.

without scrollbar

<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 -

overflow set using chrome dev 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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -