style: simplify codes adds black bar

src/css/dr.css

@@ -178,3 +178,9 @@ a:focus {
     border-color: transparent transparent transparent rgb(255 255 255 / 0.5);
     right: -42px;
 }
+
+.black-bar {
+    background-color: black;
+    position: fixed;
+    z-index: 7355607;
+}

src/js/dr.js

@@ -183,36 +183,20 @@ function addBlackBar(direction, size) {
         case "h":
             let leftBar = document.createElement("div")
             let rightBar = document.createElement("div")
-            leftBar.style.setProperty("background-color", "black")
+            leftBar.classList.add("black-bar")
-            leftBar.style.setProperty("position", "fixed")
+            rightBar.classList.add("black-bar")
-            leftBar.style.setProperty("z-index", "7355607")
+            leftBar.style.cssText = "left: 0;width: " + size.toString() + "px;height: 100%;"
-            leftBar.style.setProperty("left", "0")
+            rightBar.style.cssText = "right: 0;width: " + size.toString() + "px;height: 100%;"
-            leftBar.style.setProperty("width", size.toString() + "px")
-            leftBar.style.setProperty("height", "100%")
-            rightBar.style.setProperty("background-color", "black")
-            rightBar.style.setProperty("position", "fixed")
-            rightBar.style.setProperty("z-index", "7355607")
-            rightBar.style.setProperty("right", "0")
-            rightBar.style.setProperty("width", size.toString() + "px")
-            rightBar.style.setProperty("height", "100%")
             document.querySelector('body').appendChild(leftBar)
             document.querySelector('body').appendChild(rightBar)
             break
         case "v":
             let topBar = document.createElement("div")
             let bottomBar = document.createElement("div")
-            topBar.style.setProperty("background-color", "black")
+            topBar.classList.add("black-bar")
-            topBar.style.setProperty("position", "fixed")
+            bottomBar.classList.add("black-bar")
-            topBar.style.setProperty("z-index", "7355607")
+            topBar.style.cssText = "top: 0;width: 100%;height: " + size.toString() + "px;"
-            topBar.style.setProperty("top", "0")
+            bottomBar.style.cssText = "bottom: 0;width: 100%;height: " + size.toString() + "px;"
-            topBar.style.setProperty("width", "100%")
-            topBar.style.setProperty("height", size.toString() + "px")
-            bottomBar.style.setProperty("background-color", "black")
-            bottomBar.style.setProperty("position", "fixed")
-            bottomBar.style.setProperty("z-index", "7355607")
-            bottomBar.style.setProperty("bottom", "0")
-            bottomBar.style.setProperty("width", "100%")
-            bottomBar.style.setProperty("height", size.toString() + "px")
             document.querySelector('body').appendChild(topBar)
             document.querySelector('body').appendChild(bottomBar)
             break