Применить CSS к родительскому элементу

Question

Ниже приведен источник html, создаваемый моим приложением.

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

На этом сНе тега, мне нужно применить 'переполнения: прокрутки' в атрибуте 'стиль'. Ниже предпринята попытка с помощью инструментов разработчика Chrome -

Проблема здесь заключается в том, идентификатор «d3_workflow-1050» этого элемента автоматически генерируется, так что это может быть что угодно. В результате я не могу применить CSS на основе идентификатора.

Если это статический идентификатор, я бы создал CSS, как это -

#d3_workflow-1050 { 
    width: 500px; 
    height: 500px; 
    overflow: scroll; 
} 

Однако вспомогательный элемент имеет идентификатор «wkfsvg» и это статический идентификатор. Могу ли я использовать этот идентификатор и применить css к родительскому div?

Answer 1

Если элемент создается динамически и идентификатор является динамическим, то наилучшим решением будет be - назначить предопределенные calss элементу, например d3-workflow, затем использовать его для правила css, например

.d3-workflow { 
    width: 500px; 
    height: 500px; 
    overflow: scroll; 
} 

Если это не представляется возможным, то вы должны будете использовать JavaScript, но тогда вам придется Makesure сценарий выполняется после того, как elemetn создается как

document.getElementById('wkfsvg').parentNode.style.overflow = 'scroll' 

или использовать присвоить класс, используя JavaScript, как

var el = document.getElementById('wkfsvg').parentNode; 
el.className = (el.className || '') + ' d3-workflow'; 

Если вы хотите поддерживать только современные браузеры затем

Answer 2

Самый простой способ будет использовать JQuery:

$('#wkfsvg').parent().addClass('your-class-name'); 

, а затем добавить соответствующий CSS:

.your-class-name { 
    width: 500px; 
    height: 500px; 
    overflow: scroll; 
} 

Answer 3

в качестве CSS-единственное решение, вы не можете сразу выбрать родительский элемент. Это просто не часть какой-либо спецификации, хотя многие просили.

Похоже, что ниже класс может быть автоматически генерируется приложением и может работать:

.xcpid_d3_workflow { 
    width: 500px; 
    height: 500px; 
    overflow: scroll; 
}