Question

第一次，当我们点击按钮时，我想要一个脚本将跨度的样式更改为颜色：#eee;并且对于第二次点击，我想将其更改为颜色：＃000;并一遍又一遍地这样做。如何切换元素的这些样式？是否可以使用普通的JavaScript（没有jQuery）？我在这里找到了一些东西：jQuery click / toggle between two functions 但我不知道如何使用jQuery。

import os
from tkinter import *
from tkinter import filedialog

content = 'apple'
file_path = 'squarebot'

#FUNCTIONS
def browsefunc(): #browse button to search for files
    filename = filedialog.askopenfilename()
    infile = open(filename, 'r')
    content = infile.read()
    pathadd = os.path.dirname(filename)+filename
    file_path1.set(pathadd)
    return content

def browsefunc2(): #browse button to search for files
    filename2 = filedialog.askopenfilename()
    infile = open(filename2, 'r')
    content = infile.read()
    pathadd = os.path.dirname(filename2)+filename2
    file_path2.set(pathadd)
    return content

def browsefunc3(): #browse button to search for files
    directory = filedialog.askdirectory(initialdir='.')
    directoryname.set(directory)
    return content

def process_file(content): #process reconciliation code
    print('------------------------------')
    print(file_path1.get())
    print(file_path2.get())
    print(directoryname.get())

#GUI

root = Tk()

root.title('Reconciliation Converter')
root.geometry("698x150")

mf = Frame(root)
mf.pack()

f1 = Frame(mf, width=600, height=250) #file1
f1.pack(fill=X)
f2 = Frame(mf, width=600, height=250) #file2
f2.pack(fill=X)
f3 = Frame(mf, width=600, height=250) #destination folder
f3.pack(fill=X)
f4 = Frame(mf, width=600, height=250) #reconcile button
f4.pack()

file_path1 = StringVar()
file_path2 = StringVar()
directoryname = StringVar()

Label(f1,text="Select file 1 (Only txt files)").grid(row=0, column=0, sticky='e') #file1 button
entry1 = Entry(f1, width=50, textvariable=file_path1)
entry1.grid(row=0,column=1,padx=2,pady=2,sticky='we',columnspan=25)

Label(f2,text="Select file 2 (Only csv files)").grid(row=0, column=0, sticky='e') #file2 button
entry2 = Entry(f2, width=50, textvariable=file_path2)
entry2.grid(row=0,column=1,padx=2,pady=2,sticky='we',columnspan=25)

Label(f3,text="Select Your Destination Folder").grid(row=0, column=0, sticky='e') #destination folder button
entry3 = Entry(f3, width=50, textvariable=directoryname)
entry3.grid(row=0,column=1,padx=2,pady=2,sticky='we',columnspan=25)

Button(f1, text="Browse", command=browsefunc).grid(row=0, column=27, sticky='ew', padx=8, pady=4)#file1 button
Button(f2, text="Browse", command=browsefunc2).grid(row=0, column=27, sticky='ew', padx=8, pady=4)#file2 button
Button(f3, text="Browse", command=browsefunc3).grid(row=0, column=27, sticky='ew', padx=8, pady=4)#destination folder button
Button(f4, text="RECONCILE NOW", width=32, command=lambda: process_file(content)).grid(sticky='ew', padx=10, pady=10)#reconcile button

root.mainloop()

我想切换class属性，以便我可以将我需要的所有需要更改的代码添加到另一个类中，如class =“red” 如何将此标记的样式切换为class =“red”和class =“Blue”？

Answer 1

这是一个简单的例子：

＆＃13;

var span = document.getElementsByTagName('span')[0];
function changeStyle() {
  if(span.style.color === 'red') {
    span.style.color = 'black';
  } else {
    span.style.color = 'red'
  }
}

＆＃13;

<span>
Hi
</span>
<button onclick="changeStyle()">
Change
</button>

＆＃13;

更新

＆＃34;为什么这段代码不起作用？ 评论中的代码＆＃34;

您的代码存在一些问题。首先，您的脚本应该使用HTML标记，因为当我们执行var span = document.getElementById('span');时，应该已经定义了标识为span的元素，否则我们将获得null。要查找其他差异，请将您的代码与以下代码进行比较：

＆＃13;

<style> .red { color:red; } .blue { color:blue; } </style>

<span class="red" id="span"> Hi </span> 
<button onclick="changeStyle()"> Change </button>

<script> 
var span = document.getElementById('span');
function changeStyle() {
  for(var i = 0; i < span.classList.length; i++) {
    if(span.classList[i].indexOf('red') >= 0) {
      span.classList.remove('red');
      span.classList.add('blue');
    } else { 
      span.classList.remove('blue');
      span.classList.add('red'); 
    }
  }
}
</script>

＆＃13;

Answer 2

您可以使用CSS类执行此操作。如果您设置了一个包含所需样式的类，则只需打开和关闭它即可。

Javascript for that看起来像这样：

var elem = document.querySelector(yourElement);

elem.addEventListener("click", function() {
    elem.classList.toggle("className");
}

切换元素的样式

2 个答案:

更新