分辨給定元素使用哪種類型的“顯示” css引導程序的最佳方法是什么？

Question

例如，如果我使用JS修改引導程序“行”或“ col-md-3”的“顯示”屬性，那么最好的方法是什么來知道引導程序css使用的默認值是什么？

例如，引導源代碼必須對“ row”類使用“ block”或“ inline-block”。 如果我的JS將其更改為“ display：none”，而我想稍后再將其更改回去，那么知道將其更改回什么的最佳方法是什么？

Answer 1

使用js向該元素添加一個類，並且該類具有display：none的CSS。 然后，當您想恢復到可見部分時，請刪除添加的類。 這樣，您就不會直接更改bootstrap元素的css。

//css
.hiddenElement{
display:none !important;
}

//js
$('#elementTo_Alter').addClass('hiddenElement') //adds the class and hides the element

//to return to regular styling
$('#elementTo_Alter').removeClass('hiddenElement') //removes the class and displays the element

Answer 2

我認為您要嘗試的是為該元素保存原始計算樣式的副本。 在這種情況下，可以使用window.getComputedStyle（element）來獲取計算樣式的列表。

但是，您還需要更進一步，以便在更改原始樣式后更輕松地替換它們。

這應該工作：

//grab one or more elements
var row = document.getElementsByClassName("row")[0];

//store the style
var css = window.getComputedStyle(row);
var cssObject = {};

//make it into an object to handle specifics
for (var i = 0; i < css.length; i++) {
        cssObject[css[i]] = css.getPropertyValue(""+css[i]);
}

//change color
row.style.color = "red";

//eventually replace original color
setTimeout(function(){
  row.style.color = cssObject.color;
  console.log(cssObject.color);
}, 2000);

https://jsfiddle.net/mxt4y2eh/