Javascript 获取svg元素(text、tect等)长度宽度位置为0或undefined
描述: 使用jQuery的.height()、getBoundingClientRect(),以及d3.js的selection.node().getBBox()均失效。
原因: 经过在不同代码段内插入以上方法排查,发现罪魁祸首是父元素的display属性设为了none,之后运行函数,即使最后display改了回来,以上方法也不能获取正确的方位、大小信息。
解决: 移动代码,获取长宽信息时保证display不是none。
Bootstrap-select 样式、使用等失效
原因及解决: 自己用的bootstrap版本为3.x,更换为4.x后得到了解决。不要忘记引用6个文件:jQuery的js、bootstrap的js和css、bootstrap-select的js和css,以及在bootstrap4中还需要引用的popper.js。
为了检查是不是版本的原因,还是某个文件的原因,可以试试引用下面的cdn文件:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
<select class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
Bootstrap-select 无法设置默认选择的选项
描述: 使用jQuery的$("#tableName option[text=节点用户]").attr(“selected”, “selected”);或.attr(“selected”, true);等均没法设置默认选择。
原因及解决: bootstrap-select 中文文档有说明:
.selectpicker('val')
您可以通过调用元素上的val方法来设置所选值。
$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);
这与直接在select元素上调用val()不同。 如果直接在元素上调用val(),则bootstrap-select ui将不会刷新(因为更改事件仅从用户交互中触发)。 您必须自己调用ui refresh方法。
$('.selectpicker').val('Mustard');
$('.selectpicker').selectpicker('render');
// 这相当于上述内容
$('.selectpicker').selectpicker('val', 'Mustard');
直接使用自带函数$(’.selectpicker’).selectpicker(‘val’, ‘xxx’);即可。