让javascript函数通过链接的html页面传递页面？

我在一个单独的header.html文件中有一个header，其中有一个按钮，可以更改页面与附带javascript的对比度，从而更改一些类名，以便header.css文件可以添加功能。我计划让它也影响这些页面中的css。我通过jquery函数链接header.html，如下所示：

<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
    $(function() {
        $("#header").load("header.html");
    })
</script>

$（函数（）{
$（“#header”）.load（“header.html”）；
})

我的问题是，当我单击其他页面（如主页）上的按钮时，该按钮似乎停止工作

按钮的功能在header.html中以这种方式编写：

<script src="function.js"></script>
...
...
...
<button type="button" class="contrastBtn" id="myContrastBtn" onclick="contrast()">Change Contrast</button>

...
...
...
改变对比度

---

是否有一种方法可以跨页面保留功能，特别是更改这些页面的css单个.css文件，还是需要为每个页面复制按钮？

请发布相关代码。

contrast（）

在哪里？它看起来怎么样。为什么不使用本地存储？是的，您必须在每个要更改对比度的页面上显示一个按钮。如果您希望在页面加载时加载html，则可以使用onpageload事件。