在父元素上应用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>

在这个div标签上，我需要应用＆＃39;溢出：滚动＆＃39;在＆＃39;风格＆＃39;属性。以下是使用Chrome开发人员工具的尝试 -

这里的挑战是，id＆＃39; d3_workflow-1050＆＃39;这个元素是自动生成的，所以它可以是任何东西。因此，我无法根据id。

应用CSS

如果这是一个静态id，我会创建一个这样的CSS -

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

但是，子元素有一个id＆＃39; wkfsvg＆＃39;这是一个静态id。我可以使用此ID并将css应用于父div吗？

Answer 1

最简单的方法是使用jQuery：

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

然后添加相应的CSS：

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

Answer 2

如果元素是动态创建的并且ID是动态的，那么最好的解决方案是将预定义的calss分配给d3-workflow之类的元素，然后将其用于css规则，如

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

如果那是不可能的，那么你将不得不使用javascript，但是你必须确保在创建elemetn之后执行脚本

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

或使用您使用javascript（如

）分配课程

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

如果您只想支持现代浏览器，那么<​​/ p>

document.getElementById('wkfsvg').parentNode.classList.add('d3-workflow')

Answer 3

作为仅限CSS的解决方案，您无法立即选择父元素。它不是任何规范的一部分，尽管许多人要求。

以下类似乎可能由您的应用自动生成并可能有效：

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