Swiftで、CSSのclass要素をevaluateJavaScriptで追加＆削除する

Question

Swiftで、CSSのclass要素('change_color')をevaluateJavaScriptで装飾追加＆削除をしたいです。

class ViewController: UIViewController{
    @IBOutlet weak var webView: WKWebView!
    var webview : WKWebView?
    override func viewDidLoad() {
        super.viewDidLoad()
　　　　　　　　　　　　　　　　webView.load(URLRequest(url: URL(string: "https://www.~~~~.com")!))
        let js = "function changeBackColor(newColor{document.getElementsByClassName('change_color')[0].style.backgroundColor=newColor;}changeBackColor(\"red\");"
        self.webView?.evaluateJavaScript(self.js, completionHandler: nil)
}

かいつまんで書くとこんな感じで要素の背景色を赤にするような装飾を追加はできたのですが、削除（もとに戻す）にはどうしたらいいでしょうか？

Answer 1

background-colorを上書きしてしまうと元の値がわからなくなるので、
上書きする前に初期値を取得して覚えておく必要があります。

以下ボタンタップで背景色が切り替わるプログラムのサンプルです。

import UIKit
import WebKit

class ViewController: UIViewController {
    @IBOutlet weak var webView: WKWebView!
    @IBOutlet weak var button: UIButton!

    private enum BackgroundState {
        case initial
        case custom
    }

    private var backgroundState = BackgroundState.initial
    private var initialBackgroundColor = ""
    private var customBackgroundColor = "rgba(0, 0, 0, 0.25)"

    override func viewDidLoad() {
        super.viewDidLoad()

        webView.navigationDelegate = self

        webView.load(URLRequest(url: URL(string: "https://example.com/")!))
    }

    @IBAction func buttonTouchUpInside(_ sender: UIButton) {
        // ボタンをタップする度に背景色が入れ替わる
        // initialBackgroundColor <=> customBackgroundColor
        if backgroundState == .initial {
            webView.evaluateJavaScript("document.getElementsByTagName(\"body\")[0].style.backgroundColor = \"(customBackgroundColor)\"")

            backgroundState = .custom
        } else {
            webView.evaluateJavaScript("document.getElementsByTagName(\"body\")[0].style.backgroundColor = \"(initialBackgroundColor)\"")

            backgroundState = .initial
        }
    }
}

extension ViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 背景色の初期値を取得、変数に格納
        webView.evaluateJavaScript("getComputedStyle(document.getElementsByTagName(\"body\")[0]).getPropertyValue(\"background-color\")", completionHandler: { (result, error) in
            if let initialBackgroundColor = result as? String {
                self.initialBackgroundColor = initialBackgroundColor
            }
        })
    }
}